diff --git a/src/TodoAccordion.jsx b/src/TodoAccordion.jsx
index 6fb2812..a4f17b7 100644
--- a/src/TodoAccordion.jsx
+++ b/src/TodoAccordion.jsx
@@ -10,6 +10,12 @@ import {initialContent} from './NotProblem';
 // 3. 상위 컴포넌트에서 정의한 이벤트 핸들러와 활성 여부를 TodoPanel 컴포넌트로 전달합니다.
 
 export default function TodoAccordion() {
+  //2,3
+  const [openIndex, setOpenIndex] = useState(null); 
+
+  const handleTogglePanel = (index) => {
+    setOpenIndex(openIndex === index ? null : index); 
+  };
   return (
     <div style={{ marginTop: "50px"}}>
       <h2 style={{ textAlign: "center" }}>이전 Todo List</h2>
@@ -18,6 +24,8 @@ export default function TodoAccordion() {
           <TodoPanel 
             key={index} 
             title={content.title}
+            isOpen={openIndex === index} 
+            onToggle={() => handleTogglePanel(index)} 
           >
             {content.content}
           </TodoPanel>
@@ -27,16 +35,16 @@ export default function TodoAccordion() {
   )
 }
 
-function TodoPanel({title, children}) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <section className="panel">
-      <h3>{title}</h3>
-      {isOpen ? (
-        <p>{children}</p>
-      ): (
-        <button onClick={() => setIsOpen(true)}>열기</button>
-      )}
-      </section>
-  )
+function TodoPanel({title, children,isOpen,onToggle}) {
+ // const [isOpen, setIsOpen] = useState(false);
+ return (
+  <section className="panel">
+    <h3 onClick={onToggle}>{title}</h3> 
+    {isOpen ? (
+      <p>{children}</p>
+    ) : (
+      <button onClick={onToggle}>열기</button> 
+    )}
+  </section>
+);
 }
\ No newline at end of file
diff --git a/src/TodoContent.jsx b/src/TodoContent.jsx
index 51370fd..5965e1d 100644
--- a/src/TodoContent.jsx
+++ b/src/TodoContent.jsx
@@ -8,11 +8,13 @@ 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);
+  //const [total, setTotal] = useState(initialTodos.length);
+  const total = todos.length; 
+  //const [doneCount, setDoneCount] = useState(0);
+  const doneCount = todos.filter(todo => todo.isDone).length;
 
   function handleAddTodo(title) {
-    setTotal(total + 1);
+    //setTotal(total + 1);
     setTodos([
       ...todos,
       { id: initialTodos.length++, title: title, isDone: false }
@@ -20,18 +22,19 @@ export default function TodoContent() {
   }
 
   function handleChangeTodo(nextTodo) {
-    if (nextTodo.isDone) {
-      setDoneCount(doneCount + 1);
-    } else {
-      setDoneCount(doneCount - 1);
-    }
+    // 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);
+    //setTotal(total - 1);
     setTodos(todos.filter(prevTodo => prevTodo.id !== todoId));
   }
 
diff --git a/src/TodoHeader.jsx b/src/TodoHeader.jsx
index fe1e63a..93135a6 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);
+  //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