[DESIGN] 디자인 시스템 세팅

package.json

@@ -15,7 +15,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/main.tsx

@@ -4,9 +4,7 @@ import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
 
 import { Router } from '@/router';
-import { GlobalFont } from '@/styles/GlobalFont';
-import { GlobalStyle } from '@/styles/GlobalStyle';
-import { theme } from '@/styles/theme';
+import { GlobalFont, GlobalStyle, theme } from '@/styles';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <RecoilRoot>

src/styles/global/GlobalFont.ts

@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalFont = createGlobalStyle`
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-style: normal;
+  src: url('../assets/fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
+}
+`;

src/styles/GlobalStyle.ts → src/styles/global/GlobalStyle.ts

@@ -1,6 +1,8 @@
 import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
 
 export const GlobalStyle = createGlobalStyle`
+${reset}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,

src/styles/index.ts

@@ -0,0 +1,4 @@
+export * from '@/styles/global/GlobalFont';
+export * from '@/styles/global/GlobalStyle';
+
+export * from '@/styles/theme/theme';

src/styles/styled.d.ts

@@ -1,9 +1,10 @@
+import { ColorTypes, DeviceTypes, FontTypes } from '@/styles/theme/theme';
 import 'styled-components';
-import { ColorsTypes, FontsTypes } from './theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme {
-    colors: ColorsTypes;
-    fonts: FontsTypes;
+    color: ColorTypes;
+    font: FontTypes;
+    device: DeviceTypes;
   }
 }

src/styles/theme/color.ts

@@ -0,0 +1,45 @@
+export const color = {
+  black: '#000000',
+  white: '#ffffff',
+
+  // Primary
+  primary900: '#3d2669',
+  primary800: '#50328a',
+  primary700: '#6740b2',
+  primary600: '#8452e4',
+  primary500: '#915afb',
+  primary400: '#a77bfc',
+  primary300: '#b590fc',
+  primary200: '#ccb3fd',
+  primary100: '#ddccfe',
+  primary50: '#f4efff',
+
+  // Secondary
+  secondary900: '#66273b',
+  secondary800: '#86334e',
+  secondary700: '#ad4164',
+  secondary600: '#de5480',
+  secondary500: '#f45c8d',
+  secondary400: '#f67da4',
+  secondary300: '#f892b3',
+  secondary200: '#fab4cb',
+  secondary100: '#fcccdc',
+  secondary50: '#feeff4',
+
+  // Gray Scale
+  gray900: '#171717',
+  gray800: '#242424',
+  gray700: '#333333',
+  gray600: '#555555',
+  gray500: '#6f6f6f',
+  gray400: '#8b8b8b',
+  gray300: '#a5a5a5',
+  gray250: '#c1c1c1',
+  gray200: '#dfdfdf',
+  gray150: '#efefef',
+  gray100: '#f7f7f7',
+  gray50: '#fbfbfb',
+
+  // etc
+  bgModal: 'rgba(18, 18, 18, 0.36)',
+} as const;

src/styles/theme/device.ts

@@ -0,0 +1,11 @@
+const deviceSizes = {
+  mobile: '320px',
+  tablet: '600px',
+  desktop: '1280px',
+};
+
+export const device = {
+  mobile: `screen and (min-width: ${deviceSizes.mobile}) and (max-width: ${deviceSizes.tablet})`,
+  tablet: `screen and (min-width: ${deviceSizes.tablet}) and (max-width: ${deviceSizes.desktop})`,
+  desktop: `screen and (min-width: ${deviceSizes.desktop})`,
+};

src/styles/theme/font.ts

@@ -0,0 +1,178 @@
+interface Font {
+  font: string;
+  weight: number;
+  size: number;
+  lineHeight: number;
+}
+
+const FONT = ({ font, weight, size, lineHeight }: Font): string => {
+  return `
+    font-family : "${font}";
+    font-weight: ${weight};
+    font-size : ${size}px;
+    line-height : ${lineHeight}px;
+    `;
+};
+
+export const font = {
+  desktop: {
+    d1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 82,
+      lineHeight: 100,
+    }),
+    d2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 65,
+      lineHeight: 80,
+    }),
+    h1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 50,
+      lineHeight: 60,
+    }),
+    h2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 40,
+      lineHeight: 50,
+    }),
+    title1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 32,
+      lineHeight: 40,
+    }),
+    title2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 25,
+      lineHeight: 32,
+    }),
+    body1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 18,
+      lineHeight: 28,
+    }),
+    body1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 18,
+      lineHeight: 28,
+    }),
+    body2m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body2r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 16,
+      lineHeight: 24,
+    }),
+    label1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 12,
+      lineHeight: 20,
+    }),
+  },
+  mobile: {
+    d1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 58,
+      lineHeight: 64,
+    }),
+    d2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 45,
+      lineHeight: 56,
+    }),
+    h1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 36,
+      lineHeight: 44,
+    }),
+    h2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 28,
+      lineHeight: 32,
+    }),
+    title1: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 700,
+      size: 22,
+      lineHeight: 28,
+    }),
+    title2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 16,
+      lineHeight: 24,
+    }),
+    body2m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    body2r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1m: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label1r: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 400,
+      size: 14,
+      lineHeight: 20,
+    }),
+    label2: FONT({
+      font: 'Spoqa Han Sans Neo',
+      weight: 500,
+      size: 12,
+      lineHeight: 20,
+    }),
+  },
+};

src/styles/theme/theme.ts

@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components';
+
+import { color } from '@/styles/theme/color';
+import { device } from '@/styles/theme/device';
+import { font } from '@/styles/theme/font';
+
+export type ColorTypes = typeof color;
+export type FontTypes = typeof font;
+export type DeviceTypes = typeof device;
+export const theme: DefaultTheme = {
+  color,
+  font,
+  device,
+};

yarn.lock

@@ -2747,6 +2747,11 @@ styled-components@^6.1.8:
     stylis "4.3.1"
     tslib "2.5.0"
 
+styled-reset@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/styled-reset/-/styled-reset-4.5.2.tgz#2eba489fce52e34368693adb8d5fb4bf775edc3c"
+  integrity sha512-dbAaaVEhweBs2FGfqGBdW6oMcMK8238C2X5KCxBhUQJX92m/QyUfzRADOXhdXiXNkIPELtMCd72YY9eCdORfIw==
+
 [email protected]:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"