김미수 과제

src/App.js

@@ -1,16 +1,58 @@
+import { useState } from 'react';
 import Form from './components/Form';
 import Item from './components/Item';
 
 function App() {
+  const [todos, setTodos] = useState([]);
+  const [deleteComplete, setdeleteComplete] = useState(false);
+  const addTodo = newTodo => {
+    const newId = todos.length > 0 ? todos[0].id + 1 : 1;
+    setTodos([{ id: newId, text: newTodo, isCompleted: false }, ...todos]);
+    setdeleteComplete(false);
+  };
+
+  const deleteTodo = id => {
+    setTodos(todos.filter(todo => todo.id !== id));
+    setdeleteComplete(true);
+  };
+
+  const completeTodo = (id, isCompleted) => {
+    setTodos(
+      todos.map(todo => (todo.id === id ? { ...todo, isCompleted } : todo)),
+    );
+  };
+
+  const deleteAll = () => {
+    setTodos([]);
+    setdeleteComplete(true);
+  };
   return (
     <div className="App">
       <h1>Todo List</h1>
-      <Form />
-      <ul>
-        <Item />
-      </ul>
+      <Form onAddTodo={addTodo} />
+      {todos.length === 0 ? (
+        <p> {deleteComplete ? '할 일이 없습니다.' : '할 일이 없습니다.'} </p>
+      ) : (
+        <div>
+          <ul>
+            {todos.map(todo => (
+              <Item
+                key={todo.id}
+                id={todo.id}
+                todo={todo.text}
+                isCompleted={todo.isCompleted}
+                onDeleteTodo={deleteTodo}
+                onCompleteTodo={completeTodo}
+              />
+            ))}
+          </ul>
+          <button type="button" onClick={deleteAll}>
+            전체 삭제
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/Form.js

@@ -1,10 +1,29 @@
+form 
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 function Form({ onAddTodo }) {
+  const [toDo, setTodo] = useState('');
+  const AddToDo = () => {
+    if (toDo === '') return;
+    onAddTodo(toDo);
+    setTodo('');
+  };
+  const doList = value => {
+    const lists = value.target.value;
+    setTodo(lists);
+  };
   return (
     <div>
-      <input type="text" />
-      <button type="button">추가</button>
+      <input
+        type="text"
+        value={toDo}
+        onChange={doList}
+        placeholder="할 일을 입력해주세요."
+      />
+      <button type="button" onClick={AddToDo}>
+        추가
+      </button>
     </div>
   );
 }
@@ -17,4 +36,4 @@ Form.propTypes = {
   onAddTodo: PropTypes.func.isRequired,
 };
 
-export default Form;
+export default Form;

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" />
-      <p>{todo}</p>
+      <input
+        type="checkbox"
+        checked={isCompleted}
+        onChange={() => onCompleteTodo(id, !isCompleted)}
+      />
+      {todo}
       <div>
-        <button type="button">삭제</button>
+        <button type="button" onClick={() => onDeleteTodo(id)}>
+          삭제
+        </button>
       </div>
     </li>
   );
@@ -29,4 +35,4 @@ Item.propTypes = {
   onCompleteTodo: PropTypes.func.isRequired,
 };
 
-export default Item;
+export default Item;