[23기] 안지원 - 과제

projects/1-react/src/App.jsx

@@ -1,30 +1,62 @@
 import { useState } from 'react';
 import './index.css';
 
-// 여기에 코드를 작성하세요
+import Input from './components/input';
+import Item from './components/item';
+import Placeholder from './components/placeholder'
+import Count from './components/count'
 
 function App() {
   const [todos, setTodos] = useState([]);
 
   function addTodo(text) {
-    // 여기에 코드를 작성하세요
+    const newTodo = {
+      id : Date.now(),
+      text : text,
+      completed : false
+    };
+    setTodos([...todos, newTodo]); // 기존에 존재하던 항목 뒤에 새 항목을 포함하는 '새로운' 배열을 만들어야 한다..
   }
 
   function toggleTodo(id) {
-    // 여기에 코드를 작성하세요
+    setTodos(
+      todos.map(
+        (todo) => todo.id === id ? { // 배열 안의 것을 하나씩 돌아가며 id가 일치하는 것의 completed 반대로
+          ...todo, completed : !todo.completed // completed만 반대되는 것으로 반환
+        } : todo // 변경되지 않은 것 반환
+      )
+    );
   }
 
   function deleteTodo(id) {
-    // 여기에 코드를 작성하세요
+    // 해당 항목을 포함하지 않는 새 배열을 제공
+    setTodos(todos.filter(todo => todo.id !== id));
   }
 
-  return (
+  function countIncompleted() {
+    const incompleteCount = todos.filter(todo => !todo.completed).length;
+    return incompleteCount;
+  }
+
+  return (  
     <div className="w-100 border rounded-xl overflow-hidden">
       <div className="max-h-100 overflow-y-auto">
-        {/* 여기에 코드를 작성하세요 */}
+        <Count countIncomp={countIncompleted()}/>
+      </div>
+      <div className="max-h-100 overflow-y-auto">
+        {todos.length === 0 ? (<Placeholder />) : ( // 조건부 렌더링. 리스트가 비어있을 때 플레이스홀더 렌더링
+          todos.map((todo) =>
+            <Item
+              key = {todo.id}
+              todo = {todo}
+              onToggle = {toggleTodo}
+              onDelete = {deleteTodo}
+            />
+          )
+        )}
       </div>
 
-      {/* 여기에 코드를 작성하세요 */}
+      <Input onAdd={addTodo}/>
     </div>
   );
 }

projects/1-react/src/components/count.jsx

@@ -0,0 +1,7 @@
+export default function Count({ countIncomp }) {
+  return (
+    <p className="h-11 px-3 flex items-center text-ellipsis">
+        남은 할일 개수 : {countIncomp} 개
+    </p>
+  );
+}