[#376] Storybook 설정 및 GlobalTheme, Font 수정 (#377)

* chore: Tailwind 예시 수정 * feat: global theme 수정
prgrms-web-devcourse · Jun 17, 2024 · 3a7a9e6 · 3a7a9e6
1 parent e365160
commit 3a7a9e6
Show file tree

Hide file tree

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

diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
@@ -5,31 +5,35 @@ import React, { ComponentPropsWithoutRef, useMemo } from 'react';
 const getSizeClasses = (size: string) => {
   switch (size) {
     case 'small': {
-      return 'px-4 py-2.5';
+      return 'text-sm px-[1.2rem] py-[0.6rem]';
+    }
+    case 'medium': {
+      return 'text-md px-[1.6rem] py-[0.8rem]';
     }
     case 'large': {
-      return 'px-6 py-3';
+      return 'text-lg px-[2.4rem] py-[1rem]';
     }
     default: {
-      return 'px-5 py-2.5';
+      // large
+      return 'text-lg px-[2.4rem] py-[1rem]';
     }
   }
 };
 
 const getModeClasses = (isPrimary: boolean) =>
   isPrimary
-    ? 'text-white bg-pink-600 border-pink-600 dark:bg-pink-700 dark:border-pink-700'
-    : 'text-slate-700 bg-transparent border-slate-700 dark:text-white dark:border-white';
+    ? 'bg-main-900 text-white'
+    : 'text-main-900 bg-white border-main-900';
 
 const BASE_BUTTON_CLASSES =
-  'cursor-pointer rounded-full border-2 font-bold leading-none inline-block';
+  'cursor-pointer rounded-[0.5rem] border-[0.1rem] font-bold leading-none inline-block';
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({
   primary = false,
-  size = 'medium',
+  size = 'large',
   label,
   ...props
 }: {

diff --git a/src/stories/Switch.tsx b/src/stories/Switch.tsx
@@ -7,14 +7,14 @@ const MySwitch = () => {
       {({ checked }) => (
         <button
           className={`${
-            checked ? 'bg-blue-600' : 'bg-gray-200'
-          } relative inline-flex h-6 w-11 items-center rounded-full`}
+            checked ? 'bg-main-900' : 'bg-cancel'
+          } relative inline-flex h-[2.4rem] w-[4.2rem] items-center rounded-full`}
         >
           <span className="sr-only">Enable notifications</span>
           <span
             className={`${
-              checked ? 'translate-x-6' : 'translate-x-1'
-            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+              checked ? 'translate-x-[0.25rem]' : 'translate-x-[2rem]'
+            } inline-block h-[2rem] w-[2rem] transform rounded-full bg-white transition`}
           />
         </button>
       )}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -2,12 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Todo: 차크라 제거 이후 적용할 것 */
+@font-face {
+  font-family: 'LineSeedKR';
+  font-weight: 100;
+  src: url('font/LINESeedKR-Th.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'LineSeedKR';
+  font-weight: 400;
+  src: url('font/LINESeedKR-Rg.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'LineSeedKR';
+  font-weight: 700;
+  src: url('font/LINESeedKR-Bd.woff2') format('woff2');
+}
 
-/* .global-style {
-  font-size: '62.5%';
-  max-width: 43rem;
-  color: '#2D2D2D';
-  background-color: '#FCFCFC';
-  margin: '0 auto';
-} */
+@layer base {
+  html {
+    font-size: 62.5%;
+    width: 100%;
+    color: #2d2d2d;
+    background-color: #fcfcfc;
+    font-family: LineSeedKR;
+  }
+  .app-layout {
+    max-width: 43rem;
+    margin: 0 auto !important;
+  }
+}
diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
@@ -109,12 +109,6 @@ const theme: ThemeOverride = extendTheme({
   scheme,
   styles: {
     global: {
-      'html, body': {
-        fontSize: '62.5%',
-        bg: '#FCFCFC',
-        maxWidth: '43rem',
-        margin: '0 auto',
-      },
       'input[type="date"]': {
         position: 'relative',
       },

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