Style: 로컬폰트, 공용 색상, 공용 폰트스타일 추가 (#20)

* Fix: imageUrl 타입변경으로 인한 아이템 추가 오류 해결

* Style: pretendard 로컬 폰트 적용

* Style: 색상 테마 설정 및 공용 font style 추가

* Chore: 불필요 파일 삭제

* Style: 공용 색상, 폰트 활용하여 css 변경

* Fix: 파일명 변경 후 경로 수정 안해 발생한 오류 수정

* Chore: url변경에 따라 create 폴더 list 폴더 하위로 변경

* Chore: 불필요 코드 제거

* Fix: 잘못된 경로 수정

* 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' }],
+});

src/app/create/_components/item/Header.tsx → 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}
       >