Conversation
bk-git-hub
left a comment
bk-git-hub
left a comment
There was a problem hiding this comment.
다인님 고생하셨습니다.
지난주 피드백이 전부 잘 반영되고 이번주 코드도 의도가 분명하고 보기 좋았습니다!
고민해보고 다듬어 볼 만한 부분들은 코멘트로 남겨두었습니다.
| const todos = [ | ||
| { id: 1, content: "리액트 공식문서 읽기" }, | ||
| { id: 2, content: "알고리즘 문제 풀기" }, | ||
| { id: 3, content: "운동 30분 하기" }, | ||
| { id: 4, content: "프로젝트 회의 준비" }, | ||
| ]; | ||
|
|
||
| if (todos.length === 0) { | ||
| return <TodoEmpty />; | ||
| } | ||
|
|
||
| return ( | ||
| <ul className="flex flex-col items-start gap-[16px] self-stretch"> | ||
| <TodoCard content="리액트 공식문서 읽기" /> | ||
| <TodoCard content="알고리즘 문제 풀기" /> | ||
| <TodoCard content="운동 30분 하기" /> | ||
| <TodoCard content="프로젝트 회의 준비" /> | ||
| <ul className="flex flex-col items-start gap-4 self-stretch"> | ||
| {todos.map((todo) => ( | ||
| <TodoCard | ||
| key={todo.id} | ||
| content={todo.content} | ||
| /> | ||
| ))} |
There was a problem hiding this comment.
이번 주 과제는 완료 여부를 props로 넘겨서 각 항목이 처음부터 다른 상태로 보이도록 만드는 것이 핵심인데, 현재 TodoCard에 checked 값을 넘기지 않고 있어서 초기 렌더링에서는 모든 항목이 동일하게 보입니다. 완료/미완료 상태가 데이터 단계에서 바로 반영되도록 연결해주시면 좋겠습니다.
| <TodoHeader /> | ||
| <TodoList /> | ||
|
|
||
| <TodoHeader /> | ||
| <TodoEmpty /> |
There was a problem hiding this comment.
다음주에는 이 부분을 리스트의 길이에 따라 분기처리 해주시면 좋을것같아요
| const [isChecked, setIsChecked] = useState(checked) | ||
|
|
||
| const toggleCheck = () => { | ||
| setIsChecked(!isChecked); | ||
| }; |
There was a problem hiding this comment.
이번주 읽을 거리에서 다룬 내용은 아니긴 한데, 이전 상태를 기준으로 토글하는 업데이트라면 setIsChecked(!isChecked) 보다는 setIsChecked(prev => !prev) 형태가 의도도 더 분명하고 React 상태 업데이트 패턴에도 더 자연스럽습니다.
There was a problem hiding this comment.
오 좋은 정보 감사합니다~! 다음에 반영해보도록 하겠습니다!
| <li | ||
| onClick={toggleCheck} | ||
| className="flex p-[16px] gap-[10px] items-center self-stretch bg-card rounded-[12px] shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]" | ||
| > | ||
| <div className={`w-6 h-6 flex items-center justify-center border-[2px] rounded-full transition-colors ${ | ||
| isChecked | ||
| ? 'bg-primary/40 border-primary/0' | ||
| : 'bg-white border-border' | ||
| }`}> | ||
| {isChecked && ( | ||
| <img src={checkIcon} alt="done" className="w-[14px] h-[10px]" /> | ||
| )} | ||
|
|
||
| </div> | ||
| <p className={`text-body leading-[21px] transition-all ${ | ||
| isChecked ? 'line-through text-gray-400 opacity-60' : 'text-gray-900' | ||
| }`} | ||
| > | ||
| {content} | ||
| </p> | ||
| </li> |
There was a problem hiding this comment.
todolist의 완료 토글은 의미상 input type ckeckbox와 유사하여 input으로 리팩토링을 고려해보면 좋을 것같아요
2 participants
✅ 제출 정보
✅ 체크리스트 (필수)
main이 아니라 내 GitHub 핸들 브랜치(<handle>)다<handle>-week-xx형식이다🧩 구현 내용 요약
map적용2026-03-26.10.43.06.mov
❓ 궁금한 점