Global Style 작성 및 공통 컴포넌트 제작 (#9)

* FE 개발 환경 세팅 및 폴더구조 세팅 (#2) (#3) * Init: 초기 파일 세팅 및 폴더구조 생성 * Docs(template): PR, Issue Template 추가 * Global Style 작성 및 공통 컴포넌트 제작 (#8) * FE 개발 환경 세팅 및 폴더구조 세팅 (#2) * Init: 초기 파일 세팅 및 폴더구조 생성 * Docs(template): PR, Issue Template 추가 * Feat/issue #5 (#6) * FE 개발 환경 세팅 및 폴더구조 세팅 (#2) (#3) (#4) * Init: 초기 파일 세팅 및 폴더구조 생성 * Docs(template): PR, Issue Template 추가 * Feat(global-style): global font 및 color 선언 * Feat(global-style): global style 적용 * Feat(global-style): 웹앱 크기 Layout 적용
kakao-tech-campus-2nd-step3 · Sep 20, 2024 · 12dfc96 · 12dfc96
1 parent 00f64dd
commit 12dfc96
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,19 @@
 import { queryClient } from './api/instance';
 import { Routes } from './routes';
-import { ChakraProvider } from '@chakra-ui/react';
+import GlobalTheme from './styles/global';
+import { ChakraProvider, GlobalStyle } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 const App = () => {
   return (
-    <ChakraProvider>
-      <QueryClientProvider client={queryClient}>
-        <Routes />
-      </QueryClientProvider>
-    </ChakraProvider>
+    <>
+      <ChakraProvider theme={GlobalTheme}>
+        <QueryClientProvider client={queryClient}>
+          <GlobalStyle />
+          <Routes />
+        </QueryClientProvider>
+      </ChakraProvider>
+    </>
   );
 };
 

diff --git a/src/styles/global/index.ts b/src/styles/global/index.ts
@@ -0,0 +1,52 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const GlobalTheme = extendTheme({
+  // Font Family 선언
+  fonts: {
+    body: `'Pretendard-Regular', sans-serif`,
+  },
+  colors: {
+    /**
+     * Global Color 선언
+     * 사용 : 'color.색상이름'
+     */
+    color: {
+      basic: '#2e2e2e',
+      white: '#fff',
+      gray: '#909090',
+      primary: '#C69090',
+      secondary: '#F6E4E4',
+      whiteGray: '#F2F2F2',
+    },
+  },
+  styles: {
+    // Global Font Face 선언
+    global: {
+      '@font-face': {
+        fontFamily: 'Pretendard-Regular',
+        src: `url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff')`,
+        fontWeight: '400, 700, 900',
+        fontStyle: 'normal',
+      },
+      body: {
+        margin: 0,
+        padding: 0,
+        boxSizing: 'border-box',
+        overflowY: 'auto',
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+
+        // 모바일 너비 적용
+        '@media(min-width: 768px)': {
+          width: '480px',
+        },
+      },
+      '*': {
+        boxSizing: 'border-box', // 모든 요소에 box-sizing 적용
+      },
+    },
+  },
+});
+
+export default GlobalTheme;