canofmato week1 - refactoring

package.json

@@ -15,19 +15,19 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.1",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.0",
-    "autoprefixer": "^10.4.27",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
     "postcss": "^8.5.8",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
-    "vite": "^8.0.0"
+    "vite": "^6.0.0"
   }
 }

src/component/TodoCard.tsx

@@ -1,31 +1,11 @@
-const cardStyle = {
-  theme: {
-    backgroundColor: '#fff',
-    color: '#1F2937',
-    borderRadius: '12px',
-    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.10)',
-  },
-};
-
-const textStyle = {
-  theme: {
-    color: '#1F2937',
-    fontFamily: 'Pretendard',
-    fontSize: '14px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: '21px',
-  },
-}
-
 interface TodoCardProps {
   content: string;
 }
 
 export default function TodoCard({ content }: TodoCardProps) {
   return (
-    <div className="flex p-[16px] gap-[10px] items-start self-stretch" style={cardStyle.theme}>
-      <p style={textStyle.theme}>{content}</p>
-    </div>
+    <li className="flex p-[16px] gap-[10px] items-start self-stretch bg-card rounded-[12px] shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]">
+      <p className="text-body leading-[21px]">{content}</p>
+    </li>
   )
 }

src/component/TodoHeader.tsx

@@ -1,19 +1,9 @@
-const headerStyle = {
-  theme: {
-    color: '#1F2937',
-    fontFamily: 'Pretendard',
-    fontSize: '24px',
-    fontStyle: 'normal',
-    fontWeight: '700',
-    lineHeight: '36px',
-  },
-}
 export default function TodoHeader() {
   return (
     <div className="flex flex-col py-[10px] gap-[10px] items-start self-stretch">
       <div className="flex h-[36px] gap-[8px] items-center self-stretch">
-        <p style={headerStyle.theme}>✅</p>
-        <p style={headerStyle.theme}>오늘의 할 일</p>
+        <h1 className= "leading-[36px]">✅</h1>
+        <h1 className="leading-[36px]" >오늘의 할 일</h1>
       </div>
     </div>
   )

src/component/TodoList.tsx

@@ -1,21 +1,12 @@
 import TodoCard from "./TodoCard";
 
-
 export default function TodoList() {
   return (
-    <div className="flex flex-col items-start gap-[16px] self-stretch">
-      <TodoCard
-        content="리액트 공식문서 읽기"
-      />
-       <TodoCard
-        content="알고리즘 문제 풀기"
-      />
-       <TodoCard
-        content="운동 30분 하기"
-      />
-       <TodoCard
-        content="프로젝트 회의 준비"
-      />
-    </div>
+    <ul className="flex flex-col items-start gap-[16px] self-stretch">
+      <TodoCard content="리액트 공식문서 읽기" />
+      <TodoCard content="알고리즘 문제 풀기" />
+      <TodoCard content="운동 30분 하기" />
+      <TodoCard content="프로젝트 회의 준비" />
+    </ul>
   )
 }

src/index.css

@@ -1,10 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html,
 body,
 #root {
-  height: 100%;
-  background-color: #f5f5f5;
+  background-color: var(--color-background);
+}
+
+@theme {
+  --font-sans: "Pretendard Variable", "Pretendard", sans-serif;
+
+  /*  Color */
+  --color-primary: #3B82F6;
+  --color-primary-hover: #2563EB;
+  --color-success: #22C55E;
+  --color-warning: #f59e0B;
+  --color-danger: #EF4444;
+  --color-purple: #885CF6;
+  --color-background: #F5F5F5;
+  --color-card: #ffffff;
+  --color-text: #1f2937;
+  --color-text-secondary: #6B7280;
+  --color-border: #E5E7Eb;
+
+  /* Font */
+  --text-heading: 24px;
+  --text-heading--font-weight: 700; /* Bold */
+
+  --text-subheading: 16px;
+  --text-subheading--font-weight: 600; /* Semibold */
+
+  --text-body: 14px;
+  --text-body--font-weight: 400; /* Regular */
+
+  --text-caption: 12px;
+  --text-caption--font-weight: 400; /* Regular */
+
+}
+
+@layer base {
+  body {
+    color: var(--color-text); /* 아까 설정한 #1f2937 */
+    font-family: "Pretendard";
+  }
+
+  h1 { @apply text-heading; }
+  h2 { @apply text-subheading; }
+  p  { @apply text-body; }
+  span { @apply text-caption; }
 }

vite.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss()],
 })