design: 공통 컴포넌트 스타일 수정

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

@@ -1,5 +1,3 @@
-"use client";
-
 import "./accordion.css";
 
 import * as React from "react";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import { ko } from "date-fns/locale";
 import { ChevronLeft, ChevronRight } from "lucide-react";

packages/common/components/src/ui/date-picker/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import "./date-picker.css";
 
 import { format } from "date-fns";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { images } from "@common/assets";
 import { useUsersQuery } from "../../api";
 import { AUTH_USER_ID } from "../../config";

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

@@ -3,14 +3,15 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, value, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "placeholder:text-placeholder bg-form flex h-[3.2rem] w-full rounded-md border border-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-[3.2rem] w-full rounded-md border border-input bg-form px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
+        value={value ?? ""}
         ref={ref}
         {...props}
       />

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

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
@@ -19,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "bg-form flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input px-4 py-2 text-[1.3rem] text-label ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
+      "flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-form px-4 py-2 text-[1.3rem] text-label ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       className,
     )}
     {...props}

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

@@ -13,7 +13,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     <div className="relative w-full">
       <table
         ref={ref}
-        className={cn("w-full caption-bottom text-sm", className, variant)}
+        className={cn(
+          "table-ui w-full caption-bottom text-sm",
+          className,
+          variant,
+        )}
         {...props}
       />
     </div>

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

@@ -1,37 +1,37 @@
 @tailwind components;
 
 @layer components {
-  th {
+  .table-ui th {
     @apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
   }
-  td {
+  .table-ui td {
     @apply border-b border-b-border px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
   }
 
-  .secondary th {
+  .table-ui.secondary th {
     @apply border border-border bg-[#eaf3fb] text-[#647784];
   }
 
-  .secondary td {
+  .table-ui.secondary td {
     @apply border border-border;
   }
 
-  .line th {
+  .table-ui.line th {
     @apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
   }
 
-  .line td {
+  .table-ui.line td {
     @apply border-b border-b-border;
   }
 
   [data-mode="dark"] {
-    th {
+    .table-ui th {
       @apply bg-[#5e7b9c] text-[#fff];
     }
-    .secondary th {
+    .table-ui.secondary th {
       @apply bg-[#1a1c1d];
     }
-    .line th {
+    .table-ui.line th {
       @apply bg-[#0a0a0a];
     }
   }