웹접근성 2차 수정

packages/common/components/src/ui/badge/badge.css

@@ -16,31 +16,31 @@
   .badge.outline {
   }
   .badge.red {
-    @apply bg-[#ff6354];
+    @apply bg-[#e53e35];
   }
   .badge.blue {
-    @apply bg-[#1ba9ff];
+    @apply bg-[#008ee4];
   }
   .badge.yellow {
-    @apply bg-[#fbc700];
+    @apply bg-[#fbc700] text-[#1e1e1e];
   }
   .badge.orange {
-    @apply bg-[#ff8a22];
+    @apply bg-[#dc6800];
   }
   .badge.smokyBlue {
     @apply bg-[#5b85ff];
   }
   .badge.purple {
-    @apply bg-[#d85bff];
+    @apply bg-[#d344ff];
   }
   .badge.green {
-    @apply bg-[#07bd9d];
+    @apply bg-[#069b80];
   }
   .badge.gray {
     @apply bg-[#838383];
   }
   .badge.lightGray {
-    @apply bg-[#b9b9b9];
+    @apply bg-[#8a8a8a];
   }
   .badge.base {
     @apply px-2.5 py-0.5 text-[1.1rem];

packages/common/components/src/ui/button/button.css

@@ -8,19 +8,19 @@
     @apply bg-primary;
   }
   button[role="button"].green {
-    @apply bg-[rgba(31,208,120,1)];
+    @apply bg-[#179d5b];
   }
   button[role="button"].sky {
     @apply bg-[rgba(50,154,203,1)];
   }
   button[role="button"].yellow {
-    @apply bg-[rgba(243,201,0,1)];
+    @apply bg-[rgba(243,201,0,1)] text-[#1e1e1e];
   }
   button[role="button"].orange {
-    @apply bg-[rgba(255,149,0,1)];
+    @apply bg-[#c97600];
   }
   button[role="button"].emerald {
-    @apply bg-[rgba(90,200,250,1)];
+    @apply bg-[#0691d1];
   }
   button[role="button"].white {
     @apply border border-border bg-[rgba(255,255,255,1)] text-[#666];
@@ -29,9 +29,9 @@
     @apply bg-destructive;
   }
   button[role="button"].gray {
-    @apply bg-[rgba(153,153,153,1)];
+    @apply bg-[#8a8a8a];
   }
   button[role="button"].lightGray {
-    @apply bg-[rgba(235,235,235,1)] text-[#929292];
+    @apply bg-[rgba(235,235,235,1)] text-[#707070];
   }
 }

packages/common/components/src/ui/header/header.css

@@ -39,7 +39,7 @@
 
   [data-theme="blue"] {
     header {
-      background: #00afe5;
+      background: #0094c1;
       border: none;
     }
     header h1 span {

packages/common/components/src/ui/layout/common.css

@@ -103,7 +103,7 @@
 }
 #lnb > ul > li.on.noDepth a {
   color: #ffffff;
-  background: #40a5ff;
+  background: #0589ff;
   border-radius: 5px;
 }
 #lnb > ul > li.on > a {
@@ -204,12 +204,12 @@
 }
 #lnb > ul > li > ul > li.on a:hover {
   color: #ffffff;
-  background: #40a5ff;
+  background: #0589ff;
 }
 
 [data-theme="blue"] {
   footer {
-    background: #6ec05d;
+    background: #4c9a3c;
   }
   footer p {
     color: #fff;
@@ -218,7 +218,7 @@
 
 [data-theme="green"] {
   footer {
-    background: #24ec7d;
+    background: #0e9f4e;
   }
   footer p {
     color: #fff;

packages/common/components/src/ui/lnb/index.tsx

@@ -316,6 +316,7 @@ export function LNB({
                 !isSidebarOpen && "justify-center",
               )}
               tooltip={item.menuKornNm}
+              aria-expanded={isOpen}
             >
               <div className="flex items-center gap-2">
                 <i
@@ -333,6 +334,9 @@ export function LNB({
                 >
                   {item.menuKornNm}
                 </span>
+                <span className="sr-only">
+                  {isOpen ? "하위 메뉴 펼쳐짐" : "하위 메뉴 접힘"}
+                </span>
               </div>
               <ChevronRight
                 className={cn(

packages/common/components/src/ui/table/index.tsx

@@ -104,20 +104,22 @@ type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
 };
 
 const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ children, className, scope = "col", ...props }, ref) => {
-    const isRequired = props["data-required"] !== undefined;
+  ({ children, className, scope = "col", "data-required": dataRequired, ...props }, ref) => {
+    const isRequired =
+      dataRequired !== undefined && dataRequired !== false && dataRequired !== "false";
 
     return (
       <th
         ref={ref}
         scope={scope}
         className={cn("align-middle", className)}
+        data-required={isRequired ? "" : undefined}
         {...props}
       >
         {children}
         {isRequired && (
           <span className="table-required-marker" title="필수 항목">
-            (*)
+            {" "}(*)
           </span>
         )}
       </th>

packages/common/components/src/ui/table/table.css

@@ -8,7 +8,7 @@
     @apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2];
   }
   .table-ui th[data-required] .table-required-marker {
-    @apply ml-1 text-red-600;
+    @apply whitespace-nowrap text-red-600;
   }
   .table-ui td {
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];