[5주차] 이효린 미션 제출합니다.

src/TodoAccordion.jsx

@@ -1,6 +1,7 @@
+/* eslint-disable react/prop-types */
 //TodoAccordion.jsx
-import { useState } from 'react';
-import {initialContent} from './NotProblem';
+import { useState } from "react";
+import { initialContent } from "./NotProblem";
 
 // 문제 3.
 // TodoPanel이 한번에 하나만 열리도록 수정해주세요.
@@ -10,33 +11,35 @@ import {initialContent} from './NotProblem';
 // 3. 상위 컴포넌트에서 정의한 이벤트 핸들러와 활성 여부를 TodoPanel 컴포넌트로 전달합니다.
 
 export default function TodoAccordion() {
+  const [openIndex, setIsOpenIndex] = useState(0);
+  console.log("init", initialContent);
   return (
-    <div style={{ marginTop: "50px"}}>
+    <div style={{ marginTop: "50px" }}>
       <h2 style={{ textAlign: "center" }}>이전 Todo List</h2>
-      {
-        initialContent.map((content, index) => (
-          <TodoPanel 
-            key={index} 
-            title={content.title}
-          >
-            {content.content}
-          </TodoPanel>
-        ))
-      }
+      {initialContent.map((content, index) => (
+        <TodoPanel
+          setIsOpenIndex={setIsOpenIndex}
+          openIndex={openIndex}
+          key={index}
+          idx={index}
+          title={content.title}
+        >
+          {content.content}
+        </TodoPanel>
+      ))}
     </div>
-  )
+  );
 }
 
-function TodoPanel({title, children}) {
-  const [isOpen, setIsOpen] = useState(false);
+function TodoPanel({ idx, title, children, openIndex, setIsOpenIndex }) {
   return (
     <section className="panel">
       <h3>{title}</h3>
-      {isOpen ? (
+      {openIndex === idx ? (
         <p>{children}</p>
-      ): (
-        <button onClick={() => setIsOpen(true)}>열기</button>
+      ) : (
+        <button onClick={() => setIsOpenIndex(idx)}>열기</button>
       )}
-      </section>
-  )
-}
+    </section>
+  );
+}

src/TodoContent.jsx

@@ -1,21 +1,19 @@
 //TodoList.jsx
-import { useState } from 'react';
-import { initialTodos, AddTodo, TodoList } from './NotProblem';
+import { useEffect, useState } from "react";
+import { initialTodos, AddTodo, TodoList } from "./NotProblem";
 
 // 문제 2.
 // todo를 삭제했을 때 total과 doneCount가 올바르게 업데이트되지 않아요.
 // total, doneCount가 올바르게 업데이트되도록 수정해주세요!
 // 힌트: 필요 없는 state는 제거하고, 필요한 값은 바로 사용하세요.
 export default function TodoContent() {
   const [todos, setTodos] = useState(initialTodos);
-  const [total, setTotal] = useState(initialTodos.length);
   const [doneCount, setDoneCount] = useState(0);
 
   function handleAddTodo(title) {
-    setTotal(total + 1);
     setTodos([
       ...todos,
-      { id: initialTodos.length++, title: title, isDone: false }
+      { id: initialTodos.length++, title: title, isDone: false },
     ]);
   }
 
@@ -25,22 +23,34 @@ export default function TodoContent() {
     } else {
       setDoneCount(doneCount - 1);
     }
-    setTodos(todos.map(prevTodo => (
-      prevTodo.id === nextTodo.id ? nextTodo : prevTodo
-    )));
+    setTodos(
+      todos.map((prevTodo) =>
+        prevTodo.id === nextTodo.id ? nextTodo : prevTodo
+      )
+    );
   }
 
   function handleDeleteTodo(todoId) {
-    setTotal(total - 1);
-    setTodos(todos.filter(prevTodo => prevTodo.id !== todoId));
+    const newTodo = todos.filter((prevTodo) => prevTodo.id !== todoId);
+    const todoCnt = newTodo.filter((todo) => todo.isDone === true);
+    setTodos(newTodo);
+    setDoneCount(todoCnt.length);
   }
 
   return (
     <div>
       <AddTodo onAddTodo={handleAddTodo} />
-      <TodoList todos={todos} setTodos={setTodos} onChangeTodo={handleChangeTodo} onDeleteTodo={handleDeleteTodo} />
-      <p> 완료한 일: {doneCount}/{total}</p>
+      <TodoList
+        todos={todos}
+        setTodos={setTodos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+      <p>
+        {" "}
+        완료한 일: {doneCount}/{todos.length}
+      </p>
       <hr />
     </div>
-  )
-}
+  );
+}

src/TodoHeader.jsx

@@ -1,14 +1,13 @@
+/* eslint-disable react/prop-types */
 //Todo.jsx
-import { useState } from "react";
 
 // 문제 1.
 // TodoHeader의 색상이 올바르게 업데이트되도록 수정해주세요.
-// 힌트: 필요 없는 state는 제거하세요. 
-export default function TodoHeader(props) {
-  const [color, setColor] = useState(props.color);
+// 힌트: 필요 없는 state는 제거하세요.
+export default function TodoHeader({ color }) {
   return (
-    <div> 
+    <div>
       <h1 style={{ color: color, textAlign: "center" }}>Todo List</h1>
     </div>
   );
-}
+}