Conversation
bk-git-hub
left a comment
bk-git-hub
left a comment
There was a problem hiding this comment.
유빈님 고생 많으셨습니다!
이전 피드백을 잘 반영해주셨고, 이번 주 핵심인 useState 기반 입력값/목록 관리와 add, delete, toggle 흐름도 전체적으로 자연스럽게 구현해주셨습니다.
이번 리뷰에서는 기능이 크게 잘못된 부분보다는, 입력창의 동작 방식이나 작은 접근성/가독성 포인트처럼 조금만 더 다듬으면 좋아질 부분 위주로 코멘트를 남겼습니다.
| type="text" | ||
| placeholder="할 일을 입력하세요" | ||
| value={value} | ||
| onFocus={() => { |
There was a problem hiding this comment.
Figma의 입력 중 상태를 맞추려는 의도는 좋은데, 지금처럼 focus될 때 value를 직접 새로운 할 일로 바꾸면 사용자가 입력하지 않아도 이 문구가 그대로 추가될 수 있어요. 여기서는 value는 비워두고, 입력 중 상태는 사용자가 실제로 입력한 값으로 보여주는 편이 더 자연스럽습니다.
| <button | ||
| type="button" | ||
| className="card-delete-button" | ||
| onClick={() => onDelete(id)} | ||
| > | ||
| 🗑 | ||
| </button> |
There was a problem hiding this comment.
삭제 버튼이 아이콘만 있는 구조라서, aria-label="할 일 삭제"처럼 버튼 이름을 같이 붙여두면 의미가 더 분명해집니다.
| const onAdd = () => { | ||
| // 2. 새로운 Todo 객체 생성 및 추가 | ||
| const newTodo = { | ||
| id: Date.now(), // 겹치지 않는 고유 ID 생성 | ||
| text: inputValue, | ||
| isChecked: false, | ||
| }; |
There was a problem hiding this comment.
빈 값은 잘 막고 있는데, 실제로 추가할 때는 원본 inputValue를 그대로 저장해서 앞뒤 공백이 포함된 todo가 들어갈 수 있어요. 앞뒤 공백 허용을 의도한게 아니라면 trim()한 값을 저장하면 데이터가 조금 더 깔끔해집니다.
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| border-radius: 13421800px; |
There was a problem hiding this comment.
이부분도 9999px나 50% 정도로 해두면 좋을것같아요
2 participants
✅ 제출 정보
✅ 체크리스트 (필수)
main이 아니라 내 GitHub 핸들 브랜치(<handle>)다<handle>-week-xx형식이다🧩 구현 내용 요약
-input 박스 및 입력 상태 구현
-State로 입력값과 목록 관리
-이벤트 처리
-week2 피드백 반영
cotato-week1.-.Chrome.2026-04-02.01-03-36.mp4
❓ 궁금한 점