diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 745146cc..517c10db 100644
--- 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 }) => {
-
+
-
+
{children}
diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
index 4525a4bc..989f7ddf 100644
--- 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
index 5f42af7b..e573fe30 100644
--- a/src/stories/Switch.tsx
+++ b/src/stories/Switch.tsx
@@ -7,14 +7,14 @@ const MySwitch = () => {
{({ checked }) => (
)}
diff --git a/src/styles/global.css b/src/styles/global.css
index 49dd55b9..8ab08bdf 100644
--- 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
index d4a6f794..421b59b6 100644
--- 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
index 4a6c999e..c271dc03 100644
--- 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: [],