refactor: 공용 스타일(폰트,색상), 로컬 폰트 적용 및 기타 오류 해결

src/app/layout.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { ReactNode } from 'react';
+import { ToastContainer } from 'react-toastify';
+import Script from 'next/script';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import '@/styles/GlobalStyles.css';
-import Script from 'next/script';
-import { ToastContainer } from 'react-toastify';
 
 const queryClient = new QueryClient();
 declare global {

src/app/list/create/_components/CreateItem.css.ts

@@ -1,34 +1,35 @@
 import { style } from '@vanilla-extract/css';
+import { body1, body3 } from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
 export const article = style({
   padding: '16px 20px 30px',
 });
 
 //body1
-export const label = style({
-  marginBottom: '1.6rem',
+export const label = style([
+  body1,
+  {
+    marginBottom: '1.6rem',
+  },
+]);
 
-  fontSize: '1.6rem',
-  fontWeight: '600',
-  letterSpacing: '-0.048rem',
-});
-
-export const required = style({
-  marginLeft: '6px',
+export const required = style([
+  body1,
+  {
+    marginLeft: '6px',
 
-  fontSize: '1.6rem',
-  fontWeight: '500',
-  letterSpacing: '-0.048rem',
-  color: '#FF5454',
-});
+    fontWeight: '500',
+    color: vars.color.red,
+  },
+]);
 
 //body3
-export const description = style({
-  marginBottom: '1.6rem',
+export const description = style([
+  body3,
+  {
+    marginBottom: '1.6rem',
 
-  fontSize: '1.4rem',
-  color: '#8A8A8E',
-  fontWeight: '400',
-  lineHeight: '2.5rem',
-  letterSpacing: '-0.042rem',
-});
+    color: vars.color.gray9,
+  },
+]);

src/app/list/create/_components/item/AddItemButton.css.ts

@@ -1,23 +1,23 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { body1 } from '@/styles/font.css';
 
-export const addButton = style({
-  width: '100%',
-  height: '60px',
+export const addButton = style([
+  body1,
+  {
+    width: '100%',
+    height: '60px',
 
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '12px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '12px',
 
-  //body1
-  fontSize: '1.6rem',
-  fontWeight: '400',
-  lineHeight: '1.6rem',
-  letterSpacing: '-0.48px',
-  color: '#61646B',
+    color: vars.color.gray9,
 
-  backgroundColor: '#FFF',
+    backgroundColor: '#FFF',
 
-  border: 'solid 1px #AFB1B6 ',
-  borderRadius: '15px',
-});
+    border: 'solid 1px #AFB1B6 ',
+    borderRadius: '15px',
+  },
+]);

src/app/list/create/_components/item/Header.css.ts

@@ -1,4 +1,6 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { title3, body1 } from '@/styles/font.css';
 
 export const header = style({
   width: '100%',
@@ -16,21 +18,16 @@ export const header = style({
   alignItems: 'center',
   justifyContent: 'space-between',
 
-  backgroundColor: '#fff',
+  backgroundColor: vars.color.white,
 
   borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
 });
 
-export const headerTitle = style({
-  fontSize: '2rem',
-});
+export const headerTitle = style([title3]);
 
-export const headerNextButton = style({
-  fontSize: '1.6rem',
-  color: '#AFB1B6',
-  cursor: 'default',
-});
+export const baseButton = style([body1]);
 
-export const headerNextButtonActive = style({
-  fontSize: '1.6rem',
+export const headerNextButton = styleVariants({
+  active: [baseButton],
+  inactive: [baseButton, { color: vars.color.gray7, cursor: 'default' }],
 });

src/app/list/create/_components/item/Header.tsx

@@ -15,7 +15,7 @@ function Header({ onBackClick, isSubmitActive, onSubmitClick }: HeaderProps) {
       </button>
       <h1 className={styles.headerTitle}>리스트 생성</h1>
       <button
-        className={isSubmitActive ? styles.headerNextButtonActive : styles.headerNextButton}
+        className={isSubmitActive ? styles.headerNextButton.active : styles.headerNextButton.inactive}
         disabled={!isSubmitActive}
         onClick={onSubmitClick}
       >

src/app/list/create/_components/item/ItemLayout.css.ts

@@ -57,26 +57,3 @@ export const previewContainer = style({
   display: 'flex',
   gap: '10px',
 });
-
-export const previewBox = style({
-  width: '90px',
-  height: '90px',
-
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-
-  position: 'relative',
-
-  background: '#EBF4FF',
-
-  borderRadius: '10px',
-  whiteSpace: 'pre-wrap',
-  overflow: 'hidden',
-});
-
-export const clearButton = style({
-  position: 'absolute',
-  top: '5px',
-  right: '5px',
-});

src/app/list/create/_components/item/Items.css.ts

@@ -1,4 +1,6 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { body1, body2 } from '@/styles/font.css';
 
 export const itemsContainer = style({
   display: 'flex',
@@ -8,71 +10,61 @@ export const itemsContainer = style({
   cursor: 'grab',
 });
 
-export const item = style({
-  padding: '12px 18px',
+export const item = style([
+  body1,
+  {
+    padding: '12px 18px',
 
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
 
-  backgroundColor: '#fff',
+    backgroundColor: '#fff',
 
-  fontSize: '1.6rem',
-  border: 'solid 1px #AFB1B6',
-  borderRadius: '6px',
+    border: `solid 1px ${vars.color.gray7}`,
+    borderRadius: '6px',
 
-  transition: 'box-shadow 0.3s ease',
-  boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 2px;',
-});
+    transition: 'box-shadow 0.3s ease',
+    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 2px;',
+  },
+]);
 
 export const draggingItem = style([
   item,
   {
-    boxShadow: '0px 20px 50px -5px #AFB1B6',
+    boxShadow: `0px 20px 50px -5px ${vars.color.gray7}`,
   },
 ]);
 
-export const title = style({
-  flexGrow: 1,
-
-  //body1
-  fontSize: '1.6rem',
-  fontWeight: '400',
-  lineHeight: '1.6rem',
-  letterSpacing: '-0.48px',
-
+export const placeholder = style({
   '::placeholder': {
-    color: '#AFB1B6',
+    color: `${vars.color.gray7}`,
   },
 });
 
-export const errorTitle = style([
-  title,
+export const title = style([
+  body1,
+  placeholder,
   {
-    '::placeholder': {
-      color: '#FF5454',
-    },
+    flexGrow: 1,
   },
 ]);
 
-export const comment = style({
-  width: '100%',
-  resize: 'none',
-
-  flexGrow: 1,
+export const errorTitle = style([title, placeholder]);
 
-  //body2
-  fontSize: '1.5rem',
-  lineHeight: '2.5rem',
-  letterSpacing: '-0.45px',
+export const comment = style([
+  body2,
+  placeholder,
+  {
+    width: '100%',
+    resize: 'none',
 
-  border: 'none',
-  outline: 'none',
+    flexGrow: 1,
 
-  '::placeholder': {
-    color: '#AFB1B6',
+    border: 'none',
+    outline: 'none',
   },
-});
+]);
 
 export const linkModalChildren = style({
   width: '100%',
@@ -84,7 +76,7 @@ export const linkInput = style([
     width: '100%',
     padding: '8px',
 
-    border: 'solid 1px #AFB1B6',
+    border: `solid 1px ${vars.color.gray7}`,
     borderRadius: '4px',
   },
 ]);
@@ -93,18 +85,15 @@ export const imageInput = style({
   display: 'none',
 });
 
-export const countLength = style({
-  //body2
-  fontSize: '1.5rem',
-  letterSpacing: '-0.45px',
-  color: '#61646B',
-});
+export const countLength = style([body2, { color: `${vars.color.gray9}` }]);
 
-export const error = style({
-  marginTop: '8px',
-  marginLeft: '4px',
+export const error = style([
+  body2,
+  {
+    marginTop: '8px',
+    marginLeft: '4px',
 
-  flexShrink: '0',
-  color: '#FF5454',
-  fontSize: '1.5rem',
-});
+    flexShrink: '0',
+    color: vars.color.red,
+  },
+]);

src/app/list/create/_components/item/LinkPreview.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
 
 export const previewBox = style({
   width: '90px',
@@ -11,7 +12,7 @@ export const previewBox = style({
 
   position: 'relative',
 
-  backgroundColor: '#EBF4FF',
+  backgroundColor: vars.color.lightblue,
 
   borderRadius: '10px',
   whiteSpace: 'pre-wrap',

src/app/list/create/_components/item/Preview.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
 
 export const previewBox = style({
   width: '90px',
@@ -11,7 +12,7 @@ export const previewBox = style({
 
   position: 'relative',
 
-  backgroundColor: '#EBF4FF',
+  backgroundColor: vars.color.lightblue,
 
   borderRadius: '10px',
   whiteSpace: 'pre-wrap',
@@ -29,7 +30,7 @@ export const domainText = style({
   marginTop: '0.5rem',
 
   fontSize: '1rem',
-  color: '#61646B',
+  color: vars.color.gray9,
 });
 
 export const previewImage = style({