정답 제출

src/App.js

@@ -1,13 +1,48 @@
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import Form from './components/Form';
 import Item from './components/Item';
 
 function App() {
+  const [todos, setTodos] = useState([]);
+
+  const onAddTodo = todo => {
+    setTodos([
+      {
+        id: uuidv4(),
+        todo,
+        isCompleted: false,
+      },
+      ...todos,
+    ]);
+  };
+
+  const onDeleteTodo = id => {
+    setTodos(todos.filter(todo => todo.id !== id));
+  };
+
+  const onCompleteTodo = (id, isCompleted) => {
+    setTodos(
+      todos.map(todo => (todo.id === id ? { ...todo, isCompleted } : todo)),
+    );
+  };
+
   return (
     <div className="App">
       <h1>Todo List</h1>
-      <Form />
+      <Form onAddTodo={onAddTodo} />
+      {todos.length === 0 && <p>할 일이 없습니다.</p>}
       <ul>
-        <Item />
+        {todos.map(({ id, todo, isCompleted }) => (
+          <Item
+            key={id}
+            id={id}
+            todo={todo}
+            isCompleted={isCompleted}
+            onDeleteTodo={onDeleteTodo}
+            onCompleteTodo={onCompleteTodo}
+          />
+        ))}
       </ul>
     </div>
   );

src/components/Form.js

@@ -1,10 +1,32 @@
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 function Form({ onAddTodo }) {
+  const [todo, setTodo] = useState('');
+
+  const handleChange = e => {
+    setTodo(e.target.value);
+  };
+
+  const handleAddTodo = () => {
+    if (!todo) {
+      return;
+    }
+    onAddTodo(todo);
+    setTodo('');
+  };
+
   return (
     <div>
-      <input type="text" />
-      <button type="button">추가</button>
+      <input
+        type="text"
+        value={todo}
+        onChange={handleChange}
+        placeholder="할 일을 입력해주세요."
+      />
+      <button type="button" onClick={handleAddTodo}>
+        추가
+      </button>
     </div>
   );
 }

src/components/Item.js

@@ -1,12 +1,26 @@
 import PropTypes from 'prop-types';
 
 function Item({ id, todo, isCompleted, onDeleteTodo, onCompleteTodo }) {
+  const handleDeleteTodo = () => {
+    onDeleteTodo(id);
+  };
+
+  const handleCompleteTodo = e => {
+    onCompleteTodo(id, e.target.checked);
+  };
+
   return (
     <li>
-      <input type="checkbox" />
+      <input
+        type="checkbox"
+        defaultChecked={isCompleted}
+        onChange={handleCompleteTodo}
+      />
       <p>{todo}</p>
       <div>
-        <button type="button">삭제</button>
+        <button type="button" onClick={handleDeleteTodo}>
+          삭제
+        </button>
       </div>
     </li>
   );