[5주차] 고윤정 Adding_Interactivity_4 과제 제출합니다.

src/TodoAccordion.jsx

@@ -10,6 +10,7 @@ import {initialContent} from './NotProblem';
 // 3. 상위 컴포넌트에서 정의한 이벤트 핸들러와 활성 여부를 TodoPanel 컴포넌트로 전달합니다.
 
 export default function TodoAccordion() {
+  const [openIndex, setOpenIndex] = useState(0);
   return (
     <div style={{ marginTop: "50px"}}>
       <h2 style={{ textAlign: "center" }}>이전 Todo List</h2>
@@ -18,6 +19,8 @@ export default function TodoAccordion() {
           <TodoPanel 
             key={index} 
             title={content.title}
+            isOpen={openIndex === index} // 각 패널의 index
+            onShow={()=>setOpenIndex(index)}
           >
             {content.content}
           </TodoPanel>
@@ -27,15 +30,15 @@ export default function TodoAccordion() {
   )
 }
 
-function TodoPanel({title, children}) {
-  const [isOpen, setIsOpen] = useState(false);
+function TodoPanel({title, children, isOpen, onShow}) {
+
   return (
     <section className="panel">
       <h3>{title}</h3>
       {isOpen ? (
         <p>{children}</p>
       ): (
-        <button onClick={() => setIsOpen(true)}>열기</button>
+        <button onClick={onShow}>열기</button>
       )}
       </section>
   )

src/TodoContent.jsx

@@ -8,30 +8,24 @@ import { initialTodos, AddTodo, TodoList } from './NotProblem';
 // 힌트: 필요 없는 state는 제거하고, 필요한 값은 바로 사용하세요.
 export default function TodoContent() {
   const [todos, setTodos] = useState(initialTodos);
-  const [total, setTotal] = useState(initialTodos.length);
-  const [doneCount, setDoneCount] = useState(0);
+  // todos 배열 자체에서 항목 수 계산할 수 있음
+  const total = todos.length;
+  const doneCount = todos.filter((todo)=>todo.isDone).length;
 
   function handleAddTodo(title) {
-    setTotal(total + 1);
     setTodos([
       ...todos,
       { id: initialTodos.length++, title: title, isDone: false }
     ]);
   }
 
   function handleChangeTodo(nextTodo) {
-    if (nextTodo.isDone) {
-      setDoneCount(doneCount + 1);
-    } else {
-      setDoneCount(doneCount - 1);
-    }
     setTodos(todos.map(prevTodo => (
       prevTodo.id === nextTodo.id ? nextTodo : prevTodo
     )));
   }
 
   function handleDeleteTodo(todoId) {
-    setTotal(total - 1);
     setTodos(todos.filter(prevTodo => prevTodo.id !== todoId));
   }
 

src/TodoHeader.jsx

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