[정종윤] 정답 제출

src/App.js

@@ -1,16 +1,62 @@
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import Form from './components/Form';
 import Item from './components/Item';
 
 function App() {
+  const [todoList, setTodoList] = useState([]);
+
+  const addTodo = newTodo => {
+    const newTodoForm = {
+      id: uuidv4(),
+      todo: newTodo,
+      isCompleted: false,
+    };
+    const newTodoList = [newTodoForm, ...todoList];
+    setTodoList(newTodoList);
+  };
+
+  const deleteTodo = id => {
+    const newTodoList = todoList.filter(todo => {
+      if (todo.id === id) return false;
+      return true;
+    });
+    setTodoList(newTodoList);
+  };
+
+  const completeTodo = (id, isCompleted) => {
+    const newTodoList = todoList.map(todo =>
+      todo.id === id ? { ...todo, isCompleted: !isCompleted } : todo,
+    );
+    setTodoList(newTodoList);
+  };
+
   return (
     <div className="App">
       <h1>Todo List</h1>
-      <Form />
-      <ul>
-        <Item />
-      </ul>
+      <Form onAddTodo={addTodo} />
+      {todoList.length === 0 ? (
+        <div>할 일이 없습니다. </div>
+      ) : (
+        <ul>
+          {todoList?.map(todo => {
+            return (
+              <Item
+                key={todo.id}
+                id={todo.id}
+                todo={todo.todo}
+                isCompleted={todo.isCompleted}
+                onDeleteTodo={deleteTodo}
+                onCompleteTodo={completeTodo}
+              />
+            );
+          })}
+        </ul>
+      )}
     </div>
   );
 }
 
 export default App;
+
+// TODO: [] 할 일이 없으면 "할 일 없음"이 화면에 보여집니다.

src/components/Form.js

@@ -1,10 +1,47 @@
 import PropTypes from 'prop-types';
+import { useState } from 'react';
 
 function Form({ onAddTodo }) {
+  const ENTER = 'Enter';
+  const [inputValue, setInputValue] = useState('');
+
+  const OnAdd = newTodo => {
+    onAddTodo(newTodo);
+    setInputValue('');
+  };
+
+  const handleInputValueChange = e => {
+    setInputValue(e.target.value);
+  };
+
+  const handleClickAddButton = () => {
+    if (inputValue !== '') {
+      OnAdd(inputValue);
+    }
+  };
+
+  const handleKeyPressEnter = event => {
+    const debounce = setTimeout(() => {
+      if (event.key === ENTER) {
+        event.preventDefault();
+        handleClickAddButton();
+      }
+    }, 10);
+    return () => clearTimeout(debounce);
+  };
+
   return (
     <div>
-      <input type="text" />
-      <button type="button">추가</button>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputValueChange}
+        onKeyDown={handleKeyPressEnter}
+        placeholder="할 일을 입력해주세요."
+      />
+      <button type="button" onClick={handleClickAddButton}>
+        추가
+      </button>
     </div>
   );
 }

src/components/Item.js

@@ -3,10 +3,16 @@ import PropTypes from 'prop-types';
 function Item({ id, todo, isCompleted, onDeleteTodo, onCompleteTodo }) {
   return (
     <li>
-      <input type="checkbox" />
+      <input
+        checked={isCompleted}
+        onChange={() => onCompleteTodo(id, isCompleted)}
+        type="checkbox"
+      />
       <p>{todo}</p>
       <div>
-        <button type="button">삭제</button>
+        <button onClick={() => onDeleteTodo(id)} type="button">
+          삭제
+        </button>
       </div>
     </li>
   );