[#372] Theme, GlobalStyle, Font 세팅 (#373)

* feat: Local 폰트 세팅(LineSeedKR) * feat: globalStyle 수정 및 todo 작성 * feat: fontSize 추가 * feat: colors 추가 * feat: fontWeight 추가
prgrms-web-devcourse · Jun 17, 2024 · 4f7df42 · 4f7df42
1 parent 7ad8aef
commit 4f7df42
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 8 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,17 +1,25 @@
 import ContextProvider from '@/components/ContextProvider';
 import { ReactNode } from 'react';
+
 import '@/styles/global.css';
+import { LineSeedKR } from '@/styles/font';
 
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <html>
+    <html lang="ko">
       <head>
         <title>다독다독</title>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
         <link rel="icon" href="/favicon.ico" />
       </head>
       <body>
-        <ContextProvider>{children}</ContextProvider>
+        <ContextProvider>
+          <main
+            className={`${LineSeedKR.variable} font-lineseed text-black-700`}
+          >
+            {children}
+          </main>
+        </ContextProvider>
       </body>
     </html>
   );

diff --git a/src/components/ContextProvider.tsx b/src/components/ContextProvider.tsx
@@ -1,9 +1,7 @@
 'use client';
 
 import { RecoilRoot } from 'recoil';
-import { LineSeed } from '@/styles/font';
 import Layout from '@/ui/common/Layout';
-import { Global } from '@emotion/react';
 import { ErrorBoundary } from 'react-error-boundary';
 import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
@@ -13,7 +11,6 @@ import ErrorPage from '@/app/error';
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (
     <>
-      <Global styles={LineSeed.className} />
       <RecoilRoot>
         <ReactQueryProvider>
           <ChakraThemeProvider>

diff --git a/src/styles/font/index.tsx → src/styles/font/index.ts b/src/styles/font/index.tsx → src/styles/font/index.ts
@@ -1,6 +1,6 @@
 import localFont from 'next/font/local';
 
-export const LineSeed = localFont({
+export const LineSeedKR = localFont({
   src: [
     {
       path: './LINESeedKR-Th.woff2',
@@ -18,4 +18,5 @@ export const LineSeed = localFont({
       style: 'normal',
     },
   ],
+  variable: '--font-lineseed',
 });
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Todo: 차크라 제거 이후 적용할 것 */
+
+/* .global-style {
+  font-size: '62.5%';
+  max-width: 43rem;
+  color: '#2D2D2D';
+  background-color: '#FCFCFC';
+  margin: '0 auto';
+} */
diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
@@ -111,7 +111,7 @@ const theme: ThemeOverride = extendTheme({
     global: {
       'html, body': {
         fontSize: '62.5%',
-        bg: 'white.800',
+        bg: '#FCFCFC',
         maxWidth: '43rem',
         margin: '0 auto',
       },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,56 @@ module.exports = {
     './src/stories/**/*.{ts,tsx}',
   ],
   theme: {
-    extend: {},
+    fontSize: {
+      '2xs': '1.0rem',
+      xs: '1.2rem',
+      sm: '1.4rem',
+      md: '1.6rem',
+      lg: '1.8rem',
+      xl: '2.0rem',
+      '2xl': '2.2rem',
+    },
+    fontWeight: {
+      thin: 100,
+      regular: 400,
+      bold: 700,
+    },
+    colors: {
+      main: {
+        400: '#F5F4EE',
+        500: '#FAF0DD',
+        600: '#FFD480', // use with opacity 18%
+        700: '#FFC073',
+        800: '#F6AD55',
+        900: '#FFA436',
+      },
+      warning: {
+        700: '#FF8282',
+        800: '#F56565',
+        900: '#FF0000',
+      },
+      kakao: '#FEE102',
+      kakaotext: '#191600',
+      black: {
+        200: '#F4F4F4',
+        300: '#ECECEC',
+        400: '#D9D9D9',
+        500: '#8D8D8D',
+        600: '#4A4A4A',
+        700: '#2D2D2D', // MainText Color
+        800: '#191600',
+        900: '#000000',
+      },
+      white: '#FFFFFF',
+      background: '#FCFCFC',
+      cancel: '#CFCFCF',
+      shadow: '#CECECE',
+      placeholder: '#AFAFAF', // ( = description)
+      overlay: '#494949', // use with opacity 60%
+    },
+    fontFamily: {
+      lineseed: ['var(--font-lineseed)'],
+    },
   },
   plugins: [],
 };