[AIBE3/5팀/주권영] TODO APP 만들기 완료

[jookyworld]

리액트 투두 앱 만들기 미션 레포 [AIBE3/5팀/주권영]

개요

React를 사용해 구현한 ToDo List이다.

React의 기본 골격이라고 할 수 있는 컴포넌트, 훅 등의 구조와 흐름을 이해하고 경험하는 데에 의의가 있다.



주요 기능으로는 할일에 대한 추가, 삭제, 체크 등 관리를 제공하고, 원활한 사용 경험을 위해

중복 등록 방지, 빈칸 등록 방지, 완료한 일에 대한 표기 등을 구현하였다.

기능 요약

기능	설명
추가	입력 폼에 text 작성 후 추가 버튼을 누르면 할일이 등록된다
삭제	각 할일의 우측 삭제 버튼을 누르면 할일이 삭제된다
완료 체크	각 할일의 좌측 체크박스 체크 시 할일이 완료된다
빈칸 방지	입력 없이 추가를 누르면 alert로 제한
중복 방지	기등록된 할일을 동일하게 입력 후 추가 시 alert로 제한
독려	하단 완료/전체 할일을 명시하며 할일 처리를 위한 독려 멘트 제공
localStorage 저장	DB 없이 사용자별 todo현황 저장

주요 패키지 구성

src/
├─components/
|  ├─TodoForm.jsx
|  ├─TodoItem.jsx
|  └─TodoList.jsx
├─hooks/
|  └─useTosos.js
├─utils/
|  └─storage.js
├─App.jsx
└─main.jsx

스크린샷

[1J-Choi]

UI 정리 상태가 좋았습니다!
또한 Todo 개수 카운트 기능을 독려 기능으로 해석한 것이 좋았습니다.

[ehgk4245]

Todo 의 각 개수에 따라 독려 멘트를 남기는 아이디어가 좋은 것 같습니다!
UI가 깔끔하고 시원한 느낌이라 사용자 입장에서 편안하게 사용할 수 있을 것 같습니다.
전체적인 톤과 배치가 잘 맞아 떨어져서 완성도가 높아 보입니다🤩

[Park-seungg]

UI의 색상과 구조가 사용자가 보기에 편리하고 매력적으로 느껴지도록 신경 쓴 점,
그리고 완료한 작업의 개수를 하단에 작고 깔끔하게 배치하여 가독성을 더한 점이 좋았습니다. 👍

[gregoryc103]

구현이 직관적이며 전체적인 흐름이 잘 정리되어 있습니다.
useTodo 훅과 Context 구조가 잘 분리되어 유지보수성이 높습니다.
Tailwind CSS를 활용한 UI 디자인도 깔끔하고 사용자 친화적으로 느껴집니다.

[weare0gimbab]

하단에 getTodoMessage로 사용자 경험을 고려해서 문구를 적으신게 특히나 도움이 될것같아요!🐶 이미 추가된일이라고 알림 뜨는것도 완전 좋은것같아요!