박다인 week2

src/App.tsx

@@ -1,3 +1,4 @@
+import TodoEmpty from "./component/TodoEmpty"
 import TodoHeader from "./component/TodoHeader"
 import TodoList from "./component/TodoList"
 
@@ -7,6 +8,9 @@ function App() {
     <div className="flex flex-col w-[640px] mt-[80px] ml-[445px] mr-[464px] gap-[22px]">
       <TodoHeader />
       <TodoList />
+
+      <TodoHeader />
+      <TodoEmpty />
     </div>
     </>
 

src/component/TodoCard.tsx

@@ -1,11 +1,39 @@
+import { useState } from "react";
+import checkIcon from "../assets/Check.svg";
+
 interface TodoCardProps {
   content: string;
+  checked?: boolean;
 }
 
-export default function TodoCard({ content }: TodoCardProps) {
+export default function TodoCard({ content, checked = false }: TodoCardProps) {
+  const [isChecked, setIsChecked] = useState(checked)
+
+  const toggleCheck = () => {
+    setIsChecked(!isChecked);
+  };
+
   return (
-    <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 
+      onClick={toggleCheck}
+      className="flex p-[16px] gap-[10px] items-center self-stretch bg-card rounded-[12px] shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]"
+    >
+      <div className={`w-6 h-6 flex items-center justify-center border-[2px] rounded-full transition-colors ${
+        isChecked 
+          ? 'bg-primary/40 border-primary/0' 
+          : 'bg-white border-border'
+      }`}>
+        {isChecked && (
+          <img src={checkIcon} alt="done" className="w-[14px] h-[10px]" />
+        )}
+
+      </div>
+      <p className={`text-body leading-[21px] transition-all ${
+        isChecked ? 'line-through text-gray-400 opacity-60' : 'text-gray-900'
+      }`}
+      >
+        {content}
+      </p>
     </li>
   )
 }

src/component/TodoEmpty.tsx

@@ -0,0 +1,10 @@
+export default function TodoEmpty() {
+  return (
+    <div className="flex flex-col w-[640px] pt-[64px] h-[233px] gap-3 justify-start items-center bg-white rounded-[12px]">
+      <p className="text-[48px] leading-[72px]">📋</p>
+      <p className="text-gray-400 text-body leading-[21px]">
+        아직 할 일이 없어요
+      </p>
+    </div>
+  );
+}

src/component/TodoList.tsx

@@ -1,12 +1,27 @@
 import TodoCard from "./TodoCard";
+import TodoEmpty from "./TodoEmpty";
 
 export default function TodoList() {
+
+  const todos = [
+    { id: 1, content: "리액트 공식문서 읽기" },
+    { id: 2, content: "알고리즘 문제 풀기" },
+    { id: 3, content: "운동 30분 하기" },
+    { id: 4, content: "프로젝트 회의 준비" },
+  ];
+
+  if (todos.length === 0) {
+    return <TodoEmpty />;
+  }
+
   return (
-    <ul className="flex flex-col items-start gap-[16px] self-stretch">
-      <TodoCard content="리액트 공식문서 읽기" />
-      <TodoCard content="알고리즘 문제 풀기" />
-      <TodoCard content="운동 30분 하기" />
-      <TodoCard content="프로젝트 회의 준비" />
+    <ul className="flex flex-col items-start gap-4 self-stretch">
+      {todos.map((todo) => (
+        <TodoCard 
+          key={todo.id}
+          content={todo.content} 
+        />
+      ))}
     </ul>
   )
 }