Merge pull request #25 from IT-Cotato/suminn01-week2

백수민 week2

Author: bk-git-hub

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
@@ -23,6 +24,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vite": "^8.0.0"

package.json

@@ -1,15 +1,15 @@
-import TodoHeader from './components/TodoHeader';
-import TodoList from './components/TodoList';
-import './App.css'
+import TodoHeader from './components/TodoHeader'
+import TodoList from './components/TodoList'
 
 function App() {
-
   return (
-    <div className="todo-wrapper">
-      <TodoHeader />
-      <TodoList />
+    <div className="flex min-h-screen w-full items-start bg-[#F5F5F5]">
+      <div className="mx-auto flex w-full max-w-[640px] flex-col items-start gap-[22px]">
+        <TodoHeader />
+        <TodoList />
+      </div>
     </div>
   )
 }
 
-export default App
+export default App

src/App.css

@@ -1,10 +1,30 @@
-import "./css/TodoCard.css"
+import EmptyCircleIcon from "../icons/EmptyCircleIcon"
+import CheckIcon from "../icons/CheckIcon"
 
-export default function TodoCard({ todo }: { todo: string }) {
-
-    return (
-        <div className="todo-card">
-          <p className="todo-card-text">{todo}</p>
+function Item({todo, isCompleted }: {todo: string;isCompleted: boolean;}) {
+  return(
+    <div>
+      {isCompleted ? (
+        <div className= "flex items-center gap-[12px] text-[#1F2937] opacity-50">
+          <CheckIcon />
+          <del>{todo}</del>
+        </div>
+      ) : (
+        <div className= "flex items-center gap-[12px] text-[#1F2937]">
+          <EmptyCircleIcon />
+          <span>{todo}</span>
         </div>
-    )
+      )}
+  </div>
+  )
+}
+
+export default function TodoCard({todo, isCompleted }: {todo: string;isCompleted: boolean;}) {
+  return (
+    <li className="flex w-full items-center gap-[10px] p-4 rounded-[12px] bg-white shadow-sm">
+      <p className="text-[14px] leading-[21px] text-[#1F2937]">
+        <Item todo={todo} isCompleted={isCompleted} />
+      </p>
+    </li>
+  )
 }

src/App.tsx

@@ -1,15 +1,17 @@
-import "./css/TodoHeader.css";
-
 export default function TodoHeader() {
-    const emoji = "✅";
-    const title = "오늘의 할 일";
-  
-    return (
-      <div className="todo-header-wrapper">
-        <div className="todo-header-row">
-          <span className="todo-header-text">{emoji}</span>
-          <span className="todo-header-text">{title}</span>
-        </div>
+  const emoji = "✅";
+  const title = "오늘의 할 일";
+
+  return (
+    <div className="flex flex-col items-start gap-[10px] self-stretch py-[10px] mt-[80px]">
+      <div className="flex h-[36px] items-center gap-[8px] self-stretch">
+        <span className="text-[24px] font-bold leading-[36px] text-[#1F2937]">
+          {emoji}
+        </span>
+        <span className="text-[24px] font-bold leading-[36px] text-[#1F2937]">
+          {title}
+        </span>
       </div>
-    );
-  }
+    </div>
+  );
+}

src/components/TodoCard.tsx

@@ -1,13 +1,21 @@
 import TodoCard from "./TodoCard";
-import "./css/TodoList.css"
+import { todoData } from "../data/TodoData";
 
 export default function TodoList() {
+    const todoItems = todoData.map( item =>
+        <TodoCard key={item.id} todo = {item.todo} isCompleted = {item.isCompleted} />
+    );
+
     return (
-        <div className="todo-list">
-            <TodoCard todo="리액트 공식문서 읽기" />
-            <TodoCard todo="알고리즘 문제 풀기" />
-            <TodoCard todo="운동 30분 하기" />
-            <TodoCard todo="프로젝트 회의 준비" />
-        </div>
+        <ul className="flex flex-col items-start gap-[16px] self-stretch">
+            {todoData.length === 0 ? (
+                <li className="mx-auto flex w-full max-w-[640px] h-[233px] flex-col items-center justify-center gap-[12px] rounded-[12px] bg-white shadow-sm">
+                    <span className="text-[48px] leading-[72px] text-center">📋</span>
+                    <p className="text-[14px] text-[#6B7280]">아직 할 일이 없어요</p>
+                </li>
+            ) : (
+                todoItems
+            )}
+        </ul>
     )
 }