From cdc36e846d97dd3923a9d75fc86b32fcb3fcbc88 Mon Sep 17 00:00:00 2001
From: Yoonjeong Ko <jejukyj@naver.com>
Date: Mon, 14 Oct 2024 18:50:56 +0900
Subject: [PATCH] =?UTF-8?q?5=EC=A3=BC=EC=B0=A8=20=ED=80=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=A0=9C=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/TodoAccordion.jsx |  9 ++++++---
 src/TodoContent.jsx   | 12 +++---------
 src/TodoHeader.jsx    |  6 +++---
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/TodoAccordion.jsx b/src/TodoAccordion.jsx
index 6fb2812..2a18eb7 100644
--- a/src/TodoAccordion.jsx
+++ b/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>
   )
diff --git a/src/TodoContent.jsx b/src/TodoContent.jsx
index 51370fd..59abd26 100644
--- a/src/TodoContent.jsx
+++ b/src/TodoContent.jsx
@@ -8,11 +8,11 @@ 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 }
@@ -20,18 +20,12 @@ export default function TodoContent() {
   }
 
   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));
   }
 
diff --git a/src/TodoHeader.jsx b/src/TodoHeader.jsx
index fe1e63a..402ceeb 100644
--- a/src/TodoHeader.jsx
+++ b/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>
   );
-}
\ No newline at end of file
+}
+// color props 직접 사용
\ No newline at end of file