feat: 다크 모드 추가

services/xdesign-story/.storybook/main.ts

@@ -7,6 +7,7 @@ const config = {
         path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
         path.dirname(require.resolve(path.join('@storybook/addon-onboarding', 'package.json'))),
         path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json'))),
+        path.dirname(require.resolve(path.join('storybook-dark-mode', 'package.json'))),
     ],
     framework: {
         name: path.dirname(require.resolve(path.join('@storybook/nextjs', 'package.json'))),

services/xdesign-story/.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { StyledProvider } from '../src/style/StyledProvider';
+import { themes } from '@storybook/theming';
 
 const preview: Preview = {
     parameters: {
@@ -11,6 +12,13 @@ const preview: Preview = {
                 date: /Date$/,
             },
         },
+        darkMode: {
+            current: 'light',
+            dark: { ...themes.dark },
+            light: { ...themes.light },
+            stylePreview: true,
+            darkClass: 'dark',
+        },
     },
     decorators: [
         (Story) => (

services/xdesign-story/package.json

@@ -41,6 +41,7 @@
     "eslint": "8.13.0",
     "eslint-config-next": "12.1.5",
     "storybook": "^7.1.0-rc.2",
+    "storybook-dark-mode": "^3.0.1",
     "typescript": "4.6.3",
     "webpack": "^5.88.2"
   }

services/xdesign-story/src/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import { Icon } from '@/foundations/Icon';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ButtonVarientType, ButtonKindType, ButtonProps } from './Button.types';
+import { ThemeType } from '@/foundations/Color/Theme';
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ varient, kind, icon, children, ...props }, ref) => {
@@ -27,39 +28,40 @@ export const Layout = styled.button<ButtonProps>`
     padding: 12px 16px;
     ${({ theme }) => theme.fontStyle.Body.Large};
     font-weight: ${({ theme }) => theme.fontWeight.medium};
-    ${({ kind = 'filled', varient = 'primary' }) => kindVarient(kind, varient)};
+    ${({ kind = 'filled', varient = 'primary', theme }) =>
+        kindVarient(kind, varient, theme.themeColor)};
     cursor: pointer;
     &:disabled {
         opacity: 0.4;
         cursor: not-allowed;
     }
 `;
 
-const kindVarient = (kind: ButtonKindType, varient: ButtonVarientType) => {
+const kindVarient = (kind: ButtonKindType, varient: ButtonVarientType, themeColor: ThemeType) => {
     switch (kind) {
         case 'filled':
             return css`
-                color: ${Palette[`${varient}100` as ColorToken]};
-                background-color: ${Palette[`${varient}60` as ColorToken]};
+                color: ${themeColor.OnPrimary};
+                background-color: ${themeColor.Primary};
                 &:active {
                     opacity: 0.9;
                 }
             `;
         case 'outlined':
             return css`
-                color: ${Palette[`${varient}60` as ColorToken]};
-                background-color: ${Palette[`${varient}100` as ColorToken]};
-                border: 1px solid ${Palette[`${varient}90` as ColorToken]};
+                color: ${themeColor.Primary};
+                background-color: ${themeColor.OnPrimary};
+                border: 1px solid ${themeColor.Primary};
                 &:active {
-                    background-color: ${Palette[`${varient}90` as ColorToken]};
+                    background-color: ${themeColor.PrimaryContainer};
                 }
             `;
         case 'text':
             return css`
-                color: ${Palette[`${varient}0` as ColorToken]};
+                color: ${themeColor.OnSurface};
                 background-color: transparent;
                 &:active {
-                    background-color: ${Palette[`${varient}90` as ColorToken]};
+                    background-color: ${themeColor.PrimaryContainer};
                 }
             `;
     }

services/xdesign-story/src/components/Button/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import { ColorToken } from '@/foundations/Color/Palette';
-import { lightTheme } from '@/foundations/Color/Theme';
+import { ThemeKeyType, ThemeType } from '@/foundations/Color/Theme';
 import { Icon } from '@/foundations/Icon';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -25,36 +25,36 @@ const ChipLayout = styled(Layout)<ChipProps>`
     border-radius: 4px;
     ${({ theme }) => theme.fontStyle.Label.Medium};
     font-weight: ${({ theme }) => theme.fontWeight.regular};
-    ${({ kind = 'filled' }) => kindVarient(kind)}
+    ${({ kind = 'filled', theme }) => kindVarient(kind, theme.themeColor)}
 `;
 
-const kindVarient = (kind: ChipKindType) => {
+const kindVarient = (kind: ChipKindType, themeColor: ThemeType) => {
     switch (kind) {
         case 'filled':
             return css`
-                color: ${lightTheme.OnSecondary};
-                background: ${lightTheme.Secondary};
+                color: ${themeColor.OnSecondary};
+                background: ${themeColor.Secondary};
             `;
         case 'outlined':
             return css`
-                color: ${lightTheme.Secondary};
-                background-color: ${lightTheme.OnSecondary};
-                border: 1px solid ${lightTheme.Secondary};
+                color: ${themeColor.Secondary};
+                background-color: ${themeColor.OnSecondary};
+                border: 1px solid ${themeColor.Secondary};
                 &:active {
-                    color: ${lightTheme.Secondary};
-                    background-color: ${lightTheme.SecondaryContainer};
+                    color: ${themeColor.Secondary};
+                    background-color: ${themeColor.SecondaryContainer};
                 }
             `;
     }
 };
 
-const iconColor = (kind: ChipKindType): ColorToken => {
+const iconColor = (kind: ChipKindType): ColorToken | ThemeKeyType => {
     switch (kind) {
         case 'filled':
-            return `secondary100`;
+            return `OnSecondary`;
         case 'outlined':
-            return `secondary60`;
+            return `Secondary`;
         default:
-            return `secondary100`;
+            return `OnSecondary`;
     }
 };

services/xdesign-story/src/components/Button/FloatingActionButton/FloatingActionButton.tsx

@@ -8,17 +8,17 @@ export const FloatingActionButton = React.forwardRef<HTMLButtonElement, Floating
     ({ icon, children, ...props }: FloatingActionButtonProps, ref) => {
         return (
             <FloatingActionButtonLayout ref={ref} {...props}>
-                <Icon iconName={icon} size={24} color="tertiary100" />
+                <Icon iconName={icon} size={24} color="OnTertiary" />
                 {children}
             </FloatingActionButtonLayout>
         );
     },
 );
 
 const FloatingActionButtonLayout = styled(Layout)<FloatingActionButtonProps>`
-    color: ${({ theme }) => theme.color.lightTheme.OnTertiary};
+    color: ${({ theme }) => theme.themeColor.OnTertiary};
     border-radius: ${({ theme }) => theme.corner.Small}px;
-    background-color: ${({ theme }) => theme.color.lightTheme.Tertiary};
+    background-color: ${({ theme }) => theme.themeColor.Tertiary};
     box-shadow: 0 0 ${({ theme }) => theme.elevation.Low}px 0 rgba(0, 0, 0, 0.25);
     padding: 16px;
 `;

services/xdesign-story/src/foundations/Color/Color.types.ts

@@ -1,5 +1,5 @@
-import { ColorToken, PaletteType } from './Palette';
-import { ThemeKeyType, ThemeType } from './Theme';
+import { PaletteType } from './Palette';
+import { ThemeType } from './Theme';
 
 export type ColorType = {
     Palette: PaletteType;

services/xdesign-story/src/foundations/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { ColorToken } from '../Color/Palette';
+import { ThemeKeyType } from '../Color/Theme';
 import { icons } from './assets';
-import { FilledXquare } from './assets/FilledXquare';
 import { IconProps } from './Icon.types';
 
 export const Icon = ({ iconName, color = 'black', size = 48, ...props }: IconProps) => {
@@ -22,7 +22,13 @@ export const Icon = ({ iconName, color = 'black', size = 48, ...props }: IconPro
     );
 };
 
-const Svg = styled.svg<{ color?: ColorToken }>`
+const Svg = styled.svg<{ color?: ColorToken | ThemeKeyType }>`
     flex: 0 0 auto;
-    color: ${({ theme, color = 'black' }) => theme.color.Palette[color]};
+    color: ${({ theme, color = 'black' }) => {
+        if (typeof color === 'object' && 'Palette' in color) {
+            return theme.color.Palette[color];
+        } else if (typeof color === 'object' && 'ThemeKey' in color) {
+            return theme.themeColor[color];
+        }
+    }};
 `;

services/xdesign-story/src/foundations/Icon/Icon.types.ts

@@ -1,10 +1,11 @@
 import { HTMLAttributes } from 'react';
 import { ColorToken } from '../Color/Palette';
+import { ThemeKeyType } from '../Color/Theme';
 import { IconName } from './assets';
 
 export interface IconProps extends HTMLAttributes<SVGElement> {
     iconName?: IconName;
-    color?: ColorToken;
+    color?: ColorToken | ThemeKeyType;
     size?: number;
 }
 

services/xdesign-story/src/style/StyledProvider.tsx

@@ -1,10 +1,13 @@
 import { ThemeProvider } from '@emotion/react';
 import { GlobalStyle } from './global';
 import { theme } from './theme';
+import { useDarkMode } from 'storybook-dark-mode';
 
 export const StyledProvider = ({ children }: { children: React.ReactNode }) => {
+    const mode = useDarkMode() ? 'dark' : 'light';
+
     return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={() => theme(mode)}>
             <GlobalStyle />
             {children}
         </ThemeProvider>

services/xdesign-story/src/style/emotion.d.ts

@@ -1,8 +1,7 @@
+import { ThemeType } from '@/foundations/Color/Theme';
 import '@emotion/react';
-import { theme } from './theme';
-
-type ThemeType = typeof theme;
+import { ModeType, theme, ThemeProviderType } from './theme';
 
 declare module '@emotion/react' {
-    export interface Theme extends ThemeType {}
+    export interface Theme extends ThemeProviderType {}
 }

services/xdesign-story/src/style/theme.ts

@@ -10,19 +10,26 @@ import {
     color,
     ColorType,
 } from '@/foundations';
+import { darkTheme, lightTheme, ThemeType } from '@/foundations/Color/Theme';
 
-interface ThemeType {
+export type ModeType = 'dark' | 'light';
+
+export interface ThemeProviderType {
     color: ColorType;
+    themeColor: ThemeType;
     fontWeight: FontWeightType;
     fontStyle: FontStyleType;
     corner: CornerType;
     elevation: ElevationType;
+    mode: ModeType;
 }
 
-export const theme: ThemeType = {
+export const theme = (mode: ModeType): ThemeProviderType => ({
+    mode,
     color,
+    themeColor: mode == 'dark' ? darkTheme : lightTheme,
     fontWeight,
     fontStyle,
     corner,
     elevation,
-};
+});