From 6f680b5a3ae3cf585d573ce2a5fbdd9dc996b7d0 Mon Sep 17 00:00:00 2001 From: hyorish03 Date: Mon, 14 Oct 2024 18:43:57 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=ED=8C=A8=EB=84=90=20=EC=98=A4?= =?UTF-8?q?=ED=94=88=20=EC=8B=9C=20=ED=95=98=EB=82=98=EC=9D=98=20=ED=8C=A8?= =?UTF-8?q?=EB=84=90=EB=A7=8C=20=EC=97=B4=EB=A6=AC=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TodoAccordion.jsx | 47 +++++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/src/TodoAccordion.jsx b/src/TodoAccordion.jsx index 6fb2812..8223aad 100644 --- a/src/TodoAccordion.jsx +++ b/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 ( -
+

이전 Todo List

- { - initialContent.map((content, index) => ( - - {content.content} - - )) - } + {initialContent.map((content, index) => ( + + {content.content} + + ))}
- ) + ); } -function TodoPanel({title, children}) { - const [isOpen, setIsOpen] = useState(false); +function TodoPanel({ idx, title, children, openIndex, setIsOpenIndex }) { return (

{title}

- {isOpen ? ( + {openIndex === idx ? (

{children}

- ): ( - + ) : ( + )} -
- ) -} \ No newline at end of file + + ); +} From c02b8b49a793678f4722f49d8c726bb3f60a140a Mon Sep 17 00:00:00 2001 From: hyorish03 Date: Mon, 14 Oct 2024 18:44:41 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20state=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TodoContent.jsx | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/TodoContent.jsx b/src/TodoContent.jsx index 51370fd..6aafc32 100644 --- a/src/TodoContent.jsx +++ b/src/TodoContent.jsx @@ -1,6 +1,6 @@ //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가 올바르게 업데이트되지 않아요. @@ -8,14 +8,12 @@ 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); 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 (
- -

완료한 일: {doneCount}/{total}

+ +

+ {" "} + 완료한 일: {doneCount}/{todos.length} +

- ) -} \ No newline at end of file + ); +} From 48cfe7b6cbc4a892a3948a7829558046fa6409b6 Mon Sep 17 00:00:00 2001 From: hyorish03 Date: Mon, 14 Oct 2024 18:45:11 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20Header=EC=97=90=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20state=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B0=8F=20=EC=83=89=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=20header?= =?UTF-8?q?=EC=9D=98=20=EC=83=89=EC=9D=B4=20=EB=B3=80=EA=B2=BD=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TodoHeader.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/TodoHeader.jsx b/src/TodoHeader.jsx index fe1e63a..7b77514 100644 --- a/src/TodoHeader.jsx +++ b/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 ( -
+

Todo List

); -} \ No newline at end of file +}