Merge pull request #18 from Match-Box-Team/feature/11-global-style-작성…

…-theme-작성-초기-css-설정-블록

Feature/11 global style(전역스타일),  theme 작성, Normalize(모든 브라우저에 대한 css 설정), 폰트 추가

.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
     'no-use-before-define': 'off', // 정의되기 전에 사용하는 것을 금지하는 규칙을 끈다
     'import/extensions': 'off', // 모듈 import 시 파일 확장자를 생략할 수 있도록 한다
     'import/no-unresolved': 'off', // 경로가 올바르게 해결되지 않는 모듈 import를 허용한다
-    'no-restricted-exports': 'off', // 특정 export를 제한하는 규칙을 끈다
+    'no-restricted-exports': 'on', // 특정 export를 제한하는 규칙을 끈다
     'import/prefer-default-export': 'off', // 단일 export가 있는 경우 기본 export를 선호하는 규칙을 끈다
     'react-hooks/rules-of-hooks': 'error', // 훅의 규칙을 준수하도록 강제한다 (에러로 표시)
     'react-hooks/exhaustive-deps': 'warn', // 훅의 의존성을 검사하고 경고를 표시한다

package.json

@@ -16,6 +16,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
+    "styled-normalize": "^8.0.7",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import Router from './Router';
+import GlobalStyle from './styles/GlobalStyle';
 
 function App() {
   return (
     <div>
+      <GlobalStyle />
       <Router />
     </div>
   );

src/assets/font/font.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'SEBANG Gothic';
+  src: url('./SEBANG Gothic.woff2') format('woff2'),
+    url('./SEBANG Gothic.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'NanumGothic';
+  src: url('./NanumGothic.woff2') format('woff2'),
+    url('./NanumGothic.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

src/styles/GlobalStyle.ts

@@ -0,0 +1,26 @@
+import { createGlobalStyle } from 'styled-components';
+import { normalize } from 'styled-normalize';
+import defaultTheme from './theme';
+
+const GlobalStyle = createGlobalStyle`
+  ${normalize};
+  * {
+    box-sizing: border-box;
+  }
+  button {
+    font-family: ${defaultTheme.font.sebangGothic};
+  }
+  body {
+    height: 100%;
+    font-family: ${defaultTheme.font.nanumGothic};
+    margin: 0;
+    padding: 0;
+  }
+  html {
+    font-size: 10px;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+`;
+export default GlobalStyle;

src/styles/styled.d.ts

@@ -0,0 +1,71 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    shadow: {
+      defaultShadow: string;
+    };
+    colors: {
+      polarBlue: string;
+      backgroundPink: string;
+      brightBlue: string;
+      black: string;
+      brightGray: string;
+      inputBoxColor: string;
+      simpleGray: string;
+      darkGray: string;
+      red: string;
+      yellow: string;
+      green: string;
+      slightBlue: string;
+      white: string;
+      middleGray: string;
+      polarMiddleBlue: string;
+      backgroundGray: string;
+    };
+
+    fontWeight: {
+      weightRegular: string;
+      weightBold: string;
+      weightExtraBold: string;
+    };
+
+    mobileFontSize: {
+      sizeSmall: string;
+      sizeMedium: string;
+      sizeLarge: string;
+    };
+
+    font: {
+      sebangGothic: string;
+      nanumGothic: string;
+    };
+
+    typography: {
+      bigSebang: string;
+      middleSebang: string;
+      smallSebang: string;
+      boldBigSebang: string;
+      boldMiddleSebang: string;
+      boldSmallSebang: string;
+      bigNanum: string;
+      middleNanum: string;
+      smallNanum: string;
+      boldBigNanum: string;
+      boldMiddleNanum: string;
+      boldSmallNanum: string;
+      ExtraBoldBigNanum: string;
+      ExtraBoldMiddleNanum: string;
+      ExtraBoldSmallNanum: string;
+    };
+
+    zIndex: {
+      header: string;
+      footer: string;
+      headerNav: string;
+      modal: string;
+      loading: string;
+      error: string;
+    };
+  }
+}

src/styles/theme.ts

@@ -0,0 +1,86 @@
+import { DefaultTheme } from 'styled-components';
+
+const defaultTheme: DefaultTheme = {
+  shadow: {
+    defaultShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+  },
+  colors: {
+    polarBlue: '#313C7A',
+    backgroundPink: '#F5F4F9',
+    brightBlue: '#6D77AF',
+    black: '#000000',
+    brightGray: '#D3D3D3',
+    inputBoxColor: '#F4F4F4',
+    simpleGray: '#C2C2C2',
+    darkGray: '#737373',
+    red: '#DA0D00',
+    yellow: '#F9C132',
+    green: '#1EB640',
+    slightBlue: '#E1E3EE',
+    white: '#FFFFFF',
+    middleGray: '#CCCCCC',
+    polarMiddleBlue: '#3F4D97',
+    backgroundGray: '#F6F6F6',
+  },
+
+  fontWeight: {
+    weightRegular: '400',
+    weightBold: '700',
+    weightExtraBold: '800',
+  },
+
+  mobileFontSize: {
+    sizeSmall: '0.9rem',
+    sizeMedium: '1.2rem',
+    sizeLarge: '1.6rem',
+  },
+
+  font: {
+    sebangGothic: 'SEBANG Gothic',
+    nanumGothic: 'NanumGothic',
+  },
+
+  typography: {
+    bigSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 400; font-size: 1.6rem;',
+    middleSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 400; font-size: 1.2rem;',
+    smallSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 400; font-size: 0.9rem;',
+    boldBigSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 700; font-size: 1.6rem;',
+    boldMiddleSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 700; font-size: 1.2rem;',
+    boldSmallSebang:
+      'font-family: "SEBANG Gothic"; font-weight: 700; font-size: 0.9rem;',
+    bigNanum:
+      'font-family: "NanumGothic"; font-weight: 400; font-size: 1.6rem;',
+    middleNanum:
+      'font-family: "NanumGothic"; font-weight: 400; font-size: 1.2rem;',
+    smallNanum:
+      'font-family: "NanumGothic"; font-weight: 400; font-size: 0.9rem;',
+    boldBigNanum:
+      'font-family: "NanumGothic"; font-weight: 700; font-size: 1.6rem;',
+    boldMiddleNanum:
+      'font-family: "NanumGothic"; font-weight: 700; font-size: 1.2rem;',
+    boldSmallNanum:
+      'font-family: "NanumGothic"; font-weight: 700; font-size: 0.9rem;',
+    ExtraBoldBigNanum:
+      'font-family: "NanumGothic"; font-weight: 800; font-size: 1.6rem;',
+    ExtraBoldMiddleNanum:
+      'font-family: "NanumGothic"; font-weight: 800; font-size: 1.2rem;',
+    ExtraBoldSmallNanum:
+      'font-family: "NanumGothic"; font-weight: 800; font-size: 0.9rem;',
+  },
+
+  zIndex: {
+    header: '500',
+    footer: '500',
+    headerNav: '100',
+    modal: '900',
+    loading: '999',
+    error: '1000',
+  },
+};
+
+export default defaultTheme;