[2일차] 김태훈 과제 제출합니다.

src/App.jsx

@@ -1,15 +1,53 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import { useState, useRef, useEffect } from "react";
+import "./style/App.css";
+import List from "./components/List";
+import DisplayTodosState from "./components/DisplayTodosState";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
+  const [todos, setTodos] = useState([]);
+  const inputRef = useRef(null);
+
+  const addTodos = () => {
+    const add = inputRef.current.value;
+    if (add) {
+      setTodos(prev => [...prev, 
+        { id: Date.now(), context: add, complete: false }
+      ]);
+      inputRef.current.value = '';
+    }
+  };
+  const deleteTodos = (deleteId) => {
+    setTodos(prev => prev.filter(todo => todo.id !== deleteId));
+  };
+  const setComplete = (setId) => {
+  setTodos(prev =>
+    prev.map(todo =>
+      todo.id === setId
+        ? { ...todo, complete: !todo.complete }
+        : todo
+      )
+    );
+  };
 
   return (
     <>
-      화이팅
+      <h1>To-Do List</h1>
+      <input
+        placeholder="내용을 입력하세요"
+        ref={inputRef}
+      />
+      <button onClick={addTodos}>추가</button>
+      <ul>
+        {todos.map(todo => 
+          <List 
+            key={todo.id} 
+            todo={todo}
+            changeState={setComplete}
+            onDelete={deleteTodos} 
+          />
+        )}
+      </ul>
+      <DisplayTodosState todos={todos} />
     </>
   );
 }

src/components/DisplayTodosState.jsx

@@ -0,0 +1,21 @@
+import '../style/DisplayTodosState.css';
+import { useState, useEffect } from 'react';
+
+function DisplayTodosState({ todos }) {
+  const [count, setCount] = useState(0);
+
+  // 수정 코드(한번만 계산)
+  useEffect(() => {
+    const completedCount = todos.filter(todo => todo.complete).length;
+    setCount(completedCount);
+  }, [todos]);
+
+  return (
+    <p>
+      [ ToDo의 개수: <strong>{todos.length}</strong>개,
+       완료한 Todo: <strong>{count}</strong>개 ]
+    </p>
+  )
+}
+
+export default DisplayTodosState;

src/components/List.jsx

@@ -0,0 +1,17 @@
+import "../style/List.css";
+
+function List({ todo, changeState, onDelete }) {
+  return (
+    <li className={todo.complete?"todo end":"todo"}>
+      {todo.context}
+      <button className="complete" onClick={() => changeState(todo.id)}>
+        완료
+      </button>
+      <button className="remove" onClick={() => onDelete(todo.id)}>
+        삭제
+      </button>
+    </li>
+  );
+}
+
+export default List;

src/main.jsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import './style/index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(

src/style/App.css

@@ -0,0 +1,15 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+ul {
+  padding: 0;
+}
+
+input {
+  display: inline-block;
+  margin: 10px;
+}

src/style/DisplayTodosState.css

@@ -0,0 +1,10 @@
+strong {
+  color: green;
+  font-weight: 600;
+}
+
+p {
+  background-color: rgb(227, 242, 248);
+  padding: 5px;
+  border-radius: 15px;
+}

src/style/List.css

@@ -0,0 +1,38 @@
+.todo {
+  list-style: none;
+  margin: 10px;
+  background-color: lightgray;
+  padding: 20px;
+  border-radius: 20px;
+  width: 250px;
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+}
+
+.remove {
+  position: absolute;
+  height: 30px;
+  right: 10px;
+  background-color: red;
+  color: white;
+  padding: 0px 10px;
+  text-align: center;
+  line-height: 28px;
+  top: 35px;
+}
+
+.complete {
+  position: absolute;
+  height: 30px;
+  right: 10px;
+  background-color: yellowgreen;
+  padding: 0px 10px;
+  text-align: center;
+  line-height: 28px;
+  top: 5px;
+}
+
+.end {
+  background-color: gray !important;
+}