이유빈 week2

src/App.tsx

@@ -1,20 +1,33 @@
 import './App.css';
+import EmptyList from './components/EmptyList';
 import TodoHeader from './components/TodoHeader';
 import TodoList from './components/TodoList';
+import { useState } from 'react';
 
 
 function App() {
-  const todos = [
-    '리액트 공식문서 읽기',
-    '알고리즘 문제 풀기',
-    '운동 30분 하기',
-    '프로젝트 회의 준비',
-  ];
+  const [todos, setTodos] = useState([
+    {id:1, text:'리액트 공식문서 읽기', isChecked:false},
+    {id:2, text:'알고리즘 문제 풀기', isChecked:false},
+    {id:3, text:'운동 30분 하기', isChecked:false},
+    {id:4, text:'프로젝트 회의 준비', isChecked:false},
+  ]);
+
+  const onCheck = (id: number) => {
+    setTodos((prev) =>
+      prev.map((todo) =>
+        todo.id === id ? { ...todo, isChecked: !todo.isChecked } : todo
+      )
+    );
+  };  
 
   return (
     <div className="todo">
       <TodoHeader title="오늘의 할 일" />
-      <TodoList todos={todos} />
+      <TodoList todos={todos} onCheck={onCheck} />
+
+      <TodoHeader title="오늘의 할 일" />
+      <EmptyList />
     </div>
   );
 }

src/components/EmptyList.tsx

@@ -0,0 +1,12 @@
+import '../css/EmptyList.css';
+
+export default function EmptyList() {
+  return(
+    <div className='empty-list'>
+      <span className='empty-icon'>📋</span>
+      <p className="empty-list-text">아직 할 일이 없어요</p>
+
+    </div>
+  )
+
+}

src/components/TodoCard.tsx

@@ -1,9 +1,30 @@
 import '../css/TodoCard.css';
+import checkIcon from '../assets/checkIcon.svg';
 
 type Props = {
+  id: number;
   text: string;
+  isChecked: boolean;
+  onCheck: (id: number) => void;
 };
 
-export default function TodoCard({text}: Props){
-  return <div className="card">{text}</div>
+export default function TodoCard({ id, text, isChecked, onCheck }: Props) {
+  return (
+    <li className="card">
+      <label className="card-label">
+        <input
+          className="card-input"
+          type="checkbox"
+          checked={isChecked}
+          onChange={() => onCheck(id)}
+        />
+        <span className="card-checkbox-ui">
+          {isChecked ? (
+            <img src={checkIcon} alt="" className="card-checkbox-icon" />
+          ) : null}
+        </span>
+        <span className="card-text">{text}</span>
+      </label>
+    </li>
+  );
 }

src/components/TodoList.tsx

@@ -1,16 +1,29 @@
 import TodoCard from './TodoCard';
 import '../css/TodoList.css';
 
+export type TodoItem = {
+  id: number;
+  text: string;
+  isChecked: boolean;
+};
+
 type Props = {
-  todos: string[];
+  todos: TodoItem[];
+  onCheck: (id: number) => void;
 };
 
-export default function TodoList({ todos }: Props) {
+export default function TodoList({ todos, onCheck }: Props) {
   return (
-    <div className="card-list">
+    <ul className="card-list">
       {todos.map((todo) => (
-        <TodoCard key={todo} text={todo} />
+        <TodoCard
+          key={todo.id}
+          id={todo.id}
+          text={todo.text}
+          isChecked={todo.isChecked}
+          onCheck={onCheck}
+        />
       ))}
-    </div>
+    </ul>
   );
 }

src/css/EmptyList.css

@@ -0,0 +1,32 @@
+.empty-list{
+  display: flex;
+  width: 640px;
+  height: 233px;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  background: #FFF;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
+
+}
+
+.empty-icon{
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 72px; /* 150% */
+}
+
+.empty-list-text{
+  color: #6B7280;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px; /* 150% */
+  }

src/css/TodoCard.css

@@ -1,5 +1,6 @@
 .card {
-  width: 100%; 
+  width: 640px; 
+  height: 56px;
   padding: 16px;
   box-sizing: border-box;
   display: flex;
@@ -16,4 +17,54 @@
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
-}
+}
+
+.card:has(.card-input:checked) {
+  text-decoration: line-through;
+  opacity: 0.5;
+
+}
+
+.card-label:has(.card-input:checked) .card-checkbox-ui {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 13421800px;
+  border: 2px solid #3B82F6;
+  background: #3B82F6;
+}
+
+.card-label:has(.card-input:checked) .card-checkbox-icon {
+  width: 14px;
+  height: 10px;
+  flex-shrink: 0;
+  display: block;
+
+}
+
+
+
+.card-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+}
+
+.card-input {
+  display: none;
+}
+
+.card-checkbox-ui {
+  width: 24px;
+  height: 24px; 
+
+  border-radius: 13421800px;
+  border: 2px solid #E5E7EB;  
+}
+