diff --git a/apps/cs/src/app/styles/components.css b/apps/cs/src/app/styles/components.css index ec137cf25..b67efb8f0 100644 --- a/apps/cs/src/app/styles/components.css +++ b/apps/cs/src/app/styles/components.css @@ -14,7 +14,7 @@ @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4; } - [data-mode="dark"] { + [data-theme="black"] { .card-border { @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)]; } diff --git a/apps/cs/tailwind.config.ts b/apps/cs/tailwind.config.ts index 19ab5b282..9b4b42431 100644 --- a/apps/cs/tailwind.config.ts +++ b/apps/cs/tailwind.config.ts @@ -4,7 +4,6 @@ import presetConfig from "../../tailwind.config.preset"; export default { presets: [presetConfig], - darkMode: ["class", "[data-mode='dark']"], content: [ "./src/**/*.{js,ts,jsx,tsx,mdx}", "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", diff --git a/packages/common/assets/src/styles/base.css b/packages/common/assets/src/styles/base.css index a99b29843..7fc103b43 100644 --- a/packages/common/assets/src/styles/base.css +++ b/packages/common/assets/src/styles/base.css @@ -45,7 +45,7 @@ --container: #f1f6f9; --title: #4c5e6f; } - [data-mode="dark"] { + [data-theme="black"] { --background: #0a0a0a; --foreground: #fafafa; --card: #0a0a0a; diff --git a/packages/common/components/.storybook/preview.tsx b/packages/common/components/.storybook/preview.tsx index c1d9f9154..b25bc00a2 100644 --- a/packages/common/components/.storybook/preview.tsx +++ b/packages/common/components/.storybook/preview.tsx @@ -25,10 +25,10 @@ const preview: Preview = { withThemeByDataAttribute({ themes: { light: "light", - dark: "dark", + black: "black", }, defaultTheme: "light", - attributeName: "data-mode", + attributeName: "data-theme", }), (Story) => (
diff --git a/packages/common/components/src/api/index.ts b/packages/common/components/src/api/index.ts index 98bc9323f..fd0c1fc18 100644 --- a/packages/common/components/src/api/index.ts +++ b/packages/common/components/src/api/index.ts @@ -1,3 +1,4 @@ export * from "./client"; export * from "./menu"; +export * from "./site"; export * from "./user"; diff --git a/packages/common/components/src/api/site.ts b/packages/common/components/src/api/site.ts new file mode 100644 index 000000000..77ed968e4 --- /dev/null +++ b/packages/common/components/src/api/site.ts @@ -0,0 +1,31 @@ +import { client } from "./client"; +import { ENDPOINT } from "../config"; + +export interface SiteInfo { + siteId: string; + siteNm: string; + siteExpln: string; + siteKndCd: string; + siteKindNm: string; + siteAddr: string; + faxNumber: string; + telNo: string; + lwndCn: string; + basicSiteYn: string; + bkmkIcon: string; + useYn: string; + siteSkn: string; + regDt: string; + rgTr: string; + mdfcnDt: string; + mdFr: string; + rgTrNm: string; + mdFrNm: string; +} + +export const getSiteInfo = async (siteId: string) => { + const response = await client.get( + `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`, + ); + return response.data; +}; diff --git a/packages/common/components/src/config/api.ts b/packages/common/components/src/config/api.ts index 715f969d4..b06ffcd13 100644 --- a/packages/common/components/src/config/api.ts +++ b/packages/common/components/src/config/api.ts @@ -5,6 +5,7 @@ export const BASE_URL = `${PROXY_HOST}/server`; export const ENDPOINT = { CMS_SERVICE: { MENU_ROLES: "/cms-service/api/v1/menu-roles", + SITES: "/cms-service/api/v1/sites", }, USER_SERVICE: { USERS: "/user-service/api/v1/users", diff --git a/packages/common/components/src/lib/cookie.ts b/packages/common/components/src/lib/cookie.ts index a0fcf2bd9..8f5d0011b 100644 --- a/packages/common/components/src/lib/cookie.ts +++ b/packages/common/components/src/lib/cookie.ts @@ -10,7 +10,7 @@ export function getCookie(name: string): string | undefined { export function setCookie( name: string, value: string, - options: Cookies.CookieAttributes, + options?: Cookies.CookieAttributes, ): void { if (typeof window === "undefined") { return; @@ -20,29 +20,10 @@ export function setCookie( export function removeCookie( name: string, - options: Cookies.CookieAttributes, + options?: Cookies.CookieAttributes, ): void { if (typeof window === "undefined") { return; } Cookies.remove(name, options); } - -export function getToken(key: string): string | undefined { - return getCookie(key); -} - -export function setToken( - key: string, - token: string, - options: Cookies.CookieAttributes, -): void { - setCookie(key, token, { - ...options, - path: "/", - }); -} - -export function removeToken(key: string): void { - removeCookie(key, { path: "/" }); -} diff --git a/packages/common/components/src/ui/button-group/button-group.css b/packages/common/components/src/ui/button-group/button-group.css index c44fd7c04..5c6ae4c39 100644 --- a/packages/common/components/src/ui/button-group/button-group.css +++ b/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]; + } } } diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx index cbeb95058..0248a064f 100644 --- a/packages/common/components/src/ui/header/index.tsx +++ b/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 (
@@ -28,7 +43,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {

logo - 통합플랫폼관리 + {siteInfo?.siteNm}

diff --git a/packages/common/components/src/ui/loading/loading.stories.tsx b/packages/common/components/src/ui/loading/loading.stories.tsx index ba59300af..54dcecd21 100644 --- a/packages/common/components/src/ui/loading/loading.stories.tsx +++ b/packages/common/components/src/ui/loading/loading.stories.tsx @@ -11,7 +11,7 @@ type Story = StoryObj; export const Primary: Story = { render: () => ( -
+
@@ -21,7 +21,7 @@ export const Primary: Story = { export const Secondary: Story = { render: () => ( -
+
@@ -31,7 +31,7 @@ export const Secondary: Story = { export const PrimaryWithImage: Story = { render: () => ( -
+
@@ -41,7 +41,7 @@ export const PrimaryWithImage: Story = { export const SecondaryWithImage: Story = { render: () => ( -
+
diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css index 132239b57..29286b0da 100644 --- a/packages/common/components/src/ui/table/table.css +++ b/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]; } diff --git a/packages/common/components/tailwind.config.js b/packages/common/components/tailwind.config.js index 5638e09ec..c6fc89183 100644 --- a/packages/common/components/tailwind.config.js +++ b/packages/common/components/tailwind.config.js @@ -3,7 +3,6 @@ import presetConfig from "../../../tailwind.config.preset"; /** @type {import('tailwindcss').Config} */ export default { presets: [presetConfig], - darkMode: ["class", "[data-mode='dark']"], content: ["./src/**/*.{ts,tsx,js,jsx}", "./.storybook/**/*.{ts,tsx,js,jsx}"], plugins: [require("tailwindcss-animate")], };