[3주차] 조재희/[feat]Todolist 주요기능 구현

[wo-gml]

1. 과제 요구사항 중 구현한 내용

• 프로젝트 구조 구성 (Components/constants 분리)
• 공통 컴포넌트 제작 (Components/commons 폴더에서 작업)
• 권장 추가 구현 반영 (선택)

2. 핵심 변경 사항

3. 실행 및 검증 결과

• 실행 결과: npm run dev로 정상 실행됨. ESLint 오류 없음, 빌드 성공 (npm run build).
• [이미지 첨부: 로컬 화면 스크린샷]

4. 완료 사항

1. usestate을 사용하여 addTask,toggleTask,deleteTask 기능 구현
2. 각 필터 상태에 따라 목록이 실시간으로 필터링하여 라우팅 상태 반영
3. task remaining 앞의 항목 갯수(activeTasksCount)를 계산하여 필터 상태와 무관하게 상단에 상시 노출
4. map 함수를 통한 데이터 업데이트

5. 추가 사항

• 관련 이슈: closed #28

제출 체크리스트

• PR 제목이 규칙에 맞다
• base가 {이름}/main 브랜치다
• compare가 {이름}/{숫자}주차 브랜치다
• 프로젝트가 정상 실행된다
• 본인을 Assignee로 지정했다
• 파트 담당 Reviewer를 지정했다
• 리뷰 피드백을 반영한 뒤 머지/PR close를 진행한다

Reviewer가 참고할 내용

[j2nnif2r]

todoListUI를 변수로 분리해 중복을 줄인 점이 좋았습니다.
다만 해당 렌더링 로직을 별도의 컴포넌트로 분리하면 역할이 더 명확해지고 재사용성도 높아질 것 같습니다!

[sd091415]

현재 useNavigate를 사용하고 계신데 NavLink를 사용한다면 Button.jsx에서의 TailwindCSS 코드도 더 깔끔하게 정리 할 수 있을 거 같습니다.

[muang4089]

상태를 변경할때 prev를 활용한 함수형 업데이트를 사용하여 비동기적으로 여러번의 상태변경이 발생할때 이전 상태가 참조되는 문제를 해결해 안정적으로 동작하는 코드인 것 같습니다.
Form, FilterButtons, TodoItem 등 기능별로 컴포넌트를 적절하게 분리하신 점이 인상깊었습니다.