feat: 다크 모드 적용

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

@@ -10,16 +10,16 @@
 
   /* 버튼 색상 */
   div[role="radiogroup"][data-variant="button"][data-color="primary"] {
-    @apply border border-primary dark:border-[#404040];
+    @apply border border-primary;
   }
   div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
-    @apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#aeb7bf] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary dark:data-[state=checked]:text-white;
+    @apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white;
   }
   div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
-    @apply border border-[#ababab] dark:border-[#808080];
+    @apply border border-[#ababab];
   }
   div[role="radiogroup"][data-variant="button"][data-color="secondary"] button {
-    @apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#a5a5a5] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#848484] dark:data-[state=checked]:text-white;
+    @apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
   }
 
   /* 버튼 모양 */
@@ -28,13 +28,37 @@
   }
   div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
     button {
-    @apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary dark:bg-[#505050] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary;
+    @apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary;
   }
   div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"] {
     @apply border-[#7b7b7b];
   }
   div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
     button {
-    @apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979] dark:bg-[#505050] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#797979];
+    @apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979];
+  }
+
+  [data-theme="black"] {
+    div[role="radiogroup"][data-variant="button"][data-color="primary"] {
+      @apply border-[#404040];
+    }
+    div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
+      @apply bg-[#505050] text-[#aeb7bf] hover:bg-[#525e69] data-[state=checked]:bg-primary data-[state=checked]:text-white;
+    }
+    div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
+      @apply border-[#808080];
+    }
+    div[role="radiogroup"][data-variant="button"][data-color="secondary"]
+      button {
+      @apply bg-[#505050] text-[#a5a5a5] hover:bg-[#444444] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
+    }
+    div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
+      button {
+      @apply bg-[#505050] hover:bg-[#525e69] data-[state=checked]:bg-primary;
+    }
+    div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
+      button {
+      @apply bg-[#505050] hover:bg-[#444444] data-[state=checked]:bg-[#797979];
+    }
   }
 }

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

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
-import { getUserInfo } from "../../api";
-import { AUTH_USER_ID, ENDPOINT } from "../../config";
-import { getToken } from "../../lib";
+import { getCookie, setCookie } from "../../lib";
+import { getSiteInfo, getUserInfo } from "../../api";
+import { AUTH_USER_ID, ENDPOINT, SITE_ID } from "../../config";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -12,13 +12,28 @@ import {
 import { Button } from "../button";
 
 export function Header({ viewOnly }: { viewOnly?: boolean }) {
-  const userUniqId = getToken(AUTH_USER_ID) ?? "";
+  const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+
   const { data: userInfo } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS],
     queryFn: () => getUserInfo(userUniqId),
     enabled: !viewOnly,
   });
 
+  const { data: siteInfo } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES, SITE_ID],
+    queryFn: () => getSiteInfo(SITE_ID),
+    select: (data) => {
+      if (data.siteSkn) {
+        const siteSkin = data.siteSkn.toLowerCase();
+        setCookie("data-theme", siteSkin);
+        document.documentElement.setAttribute("data-theme", siteSkin);
+      }
+      return data;
+    },
+    enabled: !viewOnly,
+  });
+
   return (
     <header className="sticky top-0 z-30 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border bg-background">
       <div className="flex items-center">
@@ -28,7 +43,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
         <h1 className="flex items-center gap-4">
           <img src={images.logo} className="h-[3rem]" alt="logo" />
           <span className="text-[1.8rem] font-semibold text-foreground">
-            통합플랫폼관리
+            {siteInfo?.siteNm}
           </span>
         </h1>
       </div>

packages/common/components/src/ui/loading/loading.stories.tsx

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof LoadingWithAnimation>;
 
 export const Primary: Story = {
   render: () => (
-    <div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
+    <div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
       <div className="relative size-[5rem]">
         <LoadingWithAnimation color="primary" />
       </div>
@@ -21,7 +21,7 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: () => (
-    <div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
+    <div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
       <div className="relative size-[5rem]">
         <LoadingWithAnimation color="secondary" />
       </div>
@@ -31,7 +31,7 @@ export const Secondary: Story = {
 
 export const PrimaryWithImage: Story = {
   render: () => (
-    <div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
+    <div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
       <div className="relative size-[5rem]">
         <LoadingWithImage color="primary" />
       </div>
@@ -41,7 +41,7 @@ export const PrimaryWithImage: Story = {
 
 export const SecondaryWithImage: Story = {
   render: () => (
-    <div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
+    <div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
       <div className="relative size-[5rem]">
         <LoadingWithImage color="secondary" />
       </div>

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

@@ -24,7 +24,7 @@
     @apply border-b border-b-border;
   }
 
-  [data-mode="dark"] {
+  [data-mode="black"] {
     .table-ui th {
       @apply bg-[#5e7b9c] text-[#fff];
     }