Merge pull request #136 from woowacourse-teams/feat/#135

피그마 디자인 시스템 세팅
woowacourse-teams · Jul 30, 2024 · 64ecf0d · 64ecf0d
2 parents 27ce0a3 + ef86d36
commit 64ecf0d
Show file tree

Hide file tree

Showing 12 changed files with 353 additions and 13 deletions.
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -1,7 +1,8 @@
 import type { Preview } from '@storybook/react';
 import React from 'react';
 import reset from '../src/common/reset.style';
-import { Global } from '@emotion/react';
+import { Global, ThemeProvider } from '@emotion/react';
+import { theme } from '../src/common/theme/theme.style';
 
 const preview: Preview = {
   parameters: {
@@ -15,8 +16,10 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
-        <Global styles={reset} />
-        <Story />
+        <ThemeProvider theme={theme}>
+          <Global styles={reset} />
+          <Story />
+        </ThemeProvider>
       </div>
     ),
   ],

diff --git a/frontend/src/emotion.d.ts b/frontend/src/emotion.d.ts
@@ -0,0 +1,9 @@
+import { Colors, Typography } from '@_common/theme/theme.type';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    colorPalette: Colors;
+    typography: Typography;
+    semantic: Semantic;
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,21 +1,22 @@
-import { Global } from '@emotion/react';
+import { Global, ThemeProvider } from '@emotion/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import createQueryClient from './queryClient';
 import fonts from '@_common/font.style';
 import reset from './common/reset.style';
 import router from './router';
 import { useMemo } from 'react';
+import { theme } from '@_common/theme/theme.style';
 
 export default function App() {
   const queryClient = useMemo(createQueryClient, []);
 
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <Global styles={[reset, fonts]} />
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
       </QueryClientProvider>
-    </>
+    </ThemeProvider>
   );
 }
diff --git a/frontend/src/common/font.style.ts b/frontend/src/common/font.style.ts
@@ -46,7 +46,7 @@ const fonts = css`
     src:
       local('Pretendard Medium'),
       url(${pretendardMediumWoff2}) format('woff2'),
-      url("./woff-subset/Pretendard-Medium.subset.woff") format('woff');
+      url('./woff-subset/Pretendard-Medium.subset.woff') format('woff');
   }
 
   @font-face {

diff --git a/frontend/src/common/theme/colorPalette.ts b/frontend/src/common/theme/colorPalette.ts
@@ -0,0 +1,89 @@
+import { Colors } from './theme.type';
+const colorPalette: Colors = {
+  black: {
+    100: '#000000',
+    90: '#000000E5',
+    80: '#000000CC',
+    70: '#000000B2',
+    60: '#00000099',
+    50: '#00000080',
+    40: '#00000066',
+    30: '#0000004D',
+    20: '#00000033',
+    10: '#0000001A',
+  },
+  white: {
+    100: '#FFFFFF',
+    90: '#FFFFFFE5',
+    80: '#FFFFFFCC',
+    70: '#FFFFFFB2',
+    60: '#FFFFFF99',
+    50: '#FFFFFF80',
+    40: '#FFFFFF66',
+    30: '#FFFFFF4D',
+    20: '#FFFFFF33',
+    10: '#FFFFFF1A',
+  },
+  grey: {
+    900: '#131927',
+    800: '#212936',
+    700: '#394050',
+    600: '#4D5461',
+    500: '#6D717F',
+    400: '#9EA2AE',
+    300: '#D2D5DB',
+    200: '#E5E7EA',
+    100: '#F3F4F6',
+    50: '#F9FAFB',
+  },
+  green: {
+    900: '#152D16',
+    800: '#204622',
+    700: '#2B5E2E',
+    600: '#36773A',
+    500: '#428F46',
+    400: '#4DA852',
+    300: '#62B767',
+    200: '#7AC27E',
+    100: '#93CD96',
+    50: '#ABD9AE',
+  },
+  orange: {
+    900: '#6B3200',
+    800: '#8F4300',
+    700: '#B25400',
+    600: '#D66400',
+    500: '#FA7500',
+    400: '#FF881F',
+    300: '#FF9538',
+    200: '#FFA557',
+    100: '#FFB87A',
+    50: '#FFCB9E',
+  },
+  yellow: {
+    900: '#CAA802',
+    800: '#E4BD02',
+    700: '#FDD202',
+    600: '#FDD61B',
+    500: '#FDDB35',
+    400: '#FEDF4E',
+    300: '#FEE467',
+    200: '#FEE880',
+    100: '#FEED9A',
+    50: '#FEF1B3',
+  },
+  red: {
+    900: '#641D1A',
+    800: '#832523',
+    700: '#A9302D',
+    600: '#D93E39',
+    500: '#EE443F',
+    400: '#F16965',
+    300: '#F4827E',
+    200: '#F7A9A7',
+    100: '#FAC5C3',
+    50: '#FDECEC',
+  },
+};
+
+export default colorPalette;
diff --git a/frontend/src/common/theme/semantic.ts b/frontend/src/common/theme/semantic.ts
@@ -0,0 +1,9 @@
+import colorPalette from './colorPalette';
+
+const semantic = {
+  primary: colorPalette.orange[400],
+  secondary: colorPalette.orange[50],
+  disabled: colorPalette.grey[300],
+};
+
+export default semantic;
diff --git a/frontend/src/common/theme/theme.style.ts b/frontend/src/common/theme/theme.style.ts
@@ -0,0 +1,10 @@
+import { Theme } from './theme.type';
+import typography from './typography';
+import colorPalette from './colorPalette';
+import semantic from './semantic';
+
+export const theme: Theme = {
+  colorPalette,
+  typography,
+  semantic,
+};
diff --git a/frontend/src/common/theme/theme.type.ts b/frontend/src/common/theme/theme.type.ts
@@ -0,0 +1,48 @@
+import { SerializedStyles } from '@emotion/react';
+
+export interface Colors {
+  black: Record<number, string>;
+  white: Record<number, string>;
+  grey: Record<number, string>;
+  green: Record<number, string>;
+  orange: Record<number, string>;
+  yellow: Record<number, string>;
+  red: Record<number, string>;
+}
+
+export interface Semantic {
+  primary: string;
+  secondary: string;
+  disabled: string;
+}
+
+export interface Typography {
+  h1: SerializedStyles;
+  h2: SerializedStyles;
+  h3: SerializedStyles;
+  h4: SerializedStyles;
+  h5: SerializedStyles;
+  s1: SerializedStyles;
+  s2: SerializedStyles;
+  b1: SerializedStyles;
+  b2: SerializedStyles;
+  b3: SerializedStyles;
+  b4: SerializedStyles;
+  c1: SerializedStyles;
+  c2: SerializedStyles;
+  c3: SerializedStyles;
+  label: SerializedStyles;
+  ButtonFont: SerializedStyles;
+  Typeface: SerializedStyles;
+  Giant: SerializedStyles;
+  Large: SerializedStyles;
+  Medium: SerializedStyles;
+  small: SerializedStyles;
+  Tiny: SerializedStyles;
+}
+
+export interface Theme {
+  colorPalette: Colors;
+  typography: Typography;
+  semantic: Semantic;
+}
diff --git a/frontend/src/common/theme/typography.ts b/frontend/src/common/theme/typography.ts
@@ -0,0 +1,170 @@
+import { css } from '@emotion/react';
+import { Typography } from './theme.type';
+
+const typography: Typography = {
+  h1: css`
+    font-family: Pretendard;
+    font-size: 4.8rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 5.8rem;
+  `,
+  h2: css`
+    font-family: Pretendard;
+    font-size: 4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 4.8rem;
+  `,
+  h3: css`
+    font-family: Pretendard;
+    font-size: 3.2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3.8rem;
+  `,
+  h4: css`
+    font-family: Pretendard;
+    font-size: 2.8rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3.4rem;
+  `,
+  h5: css`
+    font-family: Pretendard;
+    font-size: 2.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.8rem;
+  `,
+
+  s1: css`
+    font-family: Pretendard;
+    font-size: 1.8rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.8rem;
+  `,
+  s2: css`
+    font-family: Pretendard;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.4rem;
+  `,
+
+  b1: css`
+    font-family: Pretendard;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 2.4rem;
+  `,
+  b2: css`
+    font-family: Pretendard;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 2.4rem;
+  `,
+  b3: css`
+    font-family: Pretendard;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 2rem;
+  `,
+  b4: css`
+    font-family: Pretendard;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 2rem;
+  `,
+
+  c1: css`
+    font-family: Pretendard;
+    font-size: 1.2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.6rem;
+  `,
+  c2: css`
+    font-family: Pretendard;
+    font-size: 1.2rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.6rem;
+  `,
+  c3: css`
+    font-family: Pretendard;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.4rem;
+  `,
+
+  label: css`
+    font-family: Pretendard;
+    font-size: 1.2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.6rem;
+    text-transform: uppercase;
+  `,
+
+  ButtonFont: css`
+    font-family: Inter;
+    font-size: 2.4rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.8rem;
+  `,
+
+  Typeface: css`
+    font-family: Inter;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 2.4rem;
+  `,
+
+  Giant: css`
+    font-family: Pretendard;
+    font-size: 1.8rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.4rem;
+  `,
+
+  Large: css`
+    font-family: Pretendard;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2rem;
+  `,
+  Medium: css`
+    font-family: Pretendard;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.6rem;
+  `,
+  small: css`
+    font-family: Pretendard;
+    font-size: 1.2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.6rem;
+  `,
+  Tiny: css`
+    font-family: Pretendard;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 1.2rem;
+  `,
+};
+
+export default typography;