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

@@ -0,0 +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([
+  body1,
+  {
+    marginBottom: '1.6rem',
+  },
+]);
+
+export const required = style([
+  body1,
+  {
+    marginLeft: '6px',
+
+    fontWeight: '500',
+    color: vars.color.red,
+  },
+]);
+
+//body3
+export const description = style([
+  body3,
+  {
+    marginBottom: '1.6rem',
+
+    color: vars.color.gray9,
+  },
+]);

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

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

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

@@ -0,0 +1,33 @@
+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%',
+  height: '90px',
+  paddingLeft: '20px',
+  paddingRight: '20px',
+
+  position: 'sticky',
+  top: '0',
+  left: '0',
+  zIndex: '10',
+
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  backgroundColor: vars.color.white,
+
+  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
+});
+
+export const headerTitle = style([title3]);
+
+export const baseButton = style([body1]);
+
+export const headerNextButton = styleVariants({
+  active: [baseButton],
+  inactive: [baseButton, { color: vars.color.gray7, cursor: 'default' }],
+});