[24] 이은빈 - 1주차 과제

.gitignore

@@ -1 +1,27 @@
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# vite
+.vite

projects/1-react/src/App.jsx

@@ -1,32 +1,40 @@
 import { useState } from 'react';
 import './index.css';
-
-// 여기에 코드를 작성하세요
+import Placeholder from './components/placeholder'; // Placeholder 컴포넌트 임포트 (경로 확인 필요)
+import Item from './components/item';               // Item 컴포넌트 임포트 (경로 확인 필요)
+import Input from './components/input';
 
 function App() {
   const [todos, setTodos] = useState([]);
 
   function addTodo(text) {
-    // 여기에 코드를 작성하세요
+    if (!text.trim()) return; // 빈 값 입력 방지
+    const newTodo = {
+      id : Date.now(), // 고유 ID 생성
+      text : text,
+      completed : false,
+    };
+    setTodos([...todos, newTodo]) // 스프레드 연산자로 새 배열 생성
   }
 
   function toggleTodo(id) {
-    // 여기에 코드를 작성하세요
+    setTodos(todos.map(todo => todo.id === id ? {...todo, completed : !todo.completed} : todo));
   }
 
   function deleteTodo(id) {
-    // 여기에 코드를 작성하세요
+    setTodos(todos.filter(todo => todo.id !== id));
   }
 
   return (
     <div className="w-100 border rounded-xl overflow-hidden">
       <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>
   );
 }
 
-export default App;
+export default App;