ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 다크 모드 적용

Browse Source
This commit is contained in:
chanii8
2025-03-20 18:50:31 +09:00
parent 55ac57d73c
commit b8e0a8a878
13 changed files with 94 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/app/styles/components.css
+1 -1
View File
@@ -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)];
}
apps/cs/tailwind.config.ts
-1
View File
@@ -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}",
packages/common/assets/src/styles/base.css
+1 -1
View File
@@ -45,7 +45,7 @@
--container: #f1f6f9;
--title: #4c5e6f;
}
[data-mode="dark"] {
[data-theme="black"] {
--background: #0a0a0a;
--foreground: #fafafa;
--card: #0a0a0a;
packages/common/components/.storybook/preview.tsx
+2 -2
View File
@@ -25,10 +25,10 @@ const preview: Preview = {
withThemeByDataAttribute({
themes: {
light: "light",
dark: "dark",
black: "black",
},
defaultTheme: "light",
attributeName: "data-mode",
attributeName: "data-theme",
}),
(Story) => (
<div className="rounded-lg bg-background px-28 py-16">
packages/common/components/src/api/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from "./client";
export * from "./menu";
export * from "./site";
export * from "./user";
packages/common/components/src/api/site.ts
+31
View File
@@ -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<SiteInfo>(
`${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
);
return response.data;
};
packages/common/components/src/config/api.ts
+1
View File
@@ -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",
packages/common/components/src/lib/cookie.ts
+2 -21
View File
@@ -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: "/" });
}
packages/common/components/src/ui/button-group/button-group.css
+30 -6
View File
@@ -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
+20 -5
View File
@@ -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
+4 -4
View File
@@ -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
+1 -1
View File
@@ -24,7 +24,7 @@
@apply border-b border-b-border;
}
[data-mode="dark"] {
[data-mode="black"] {
.table-ui th {
@apply bg-[#5e7b9c] text-[#fff];
}
packages/common/components/tailwind.config.js
-1
View File
@@ -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")],
};