[AIBE3 / 2팀 / 손세환] Todo List 만들기 완료

[Sonsehwan45]

📝 투두리스트 앱 (Todo List App)

리액트(React)와 테일윈드 CSS(Tailwind CSS)를 사용해 만든 간단한 할 일 관리 애플리케이션입니다. 모든 데이터는 브라우저의 로컬 스토리지에 저장되어 영속성을 가집니다.

✨ 주요 기능

• 할 일 추가 및 삭제: 새로운 할 일을 등록하고 목록에서 제거할 수 있습니다.
• 상태 토글: 체크박스를 통해 각 할 일의 완료/미완료 상태를 변경할 수 있습니다.
• 커스텀 삭제 확인: 항목 삭제 시, 커스텀 다이얼로그를 통해 한 번 더 확인하여 사용자 실수를 방지합니다.
• 데이터 영속성: 브라우저의 로컬 스토리지를 사용하여, 창을 닫거나 새로고침해도 데이터가 유지됩니다.

🛠️ 사용 기술

• React.js: (Vite 기반)
• JavaScript (ES6+)
• Tailwind CSS: (CDN 방식)

📂 프로젝트 구조

src/
├── assets/
│   └── react.svg
├── components/
│   ├── Dialog.jsx
│   ├── TodoItem.jsx
│   ├── TodoList.jsx
│   └── TodoWriteForm.jsx
├── hooks/
│   └── useTodos.js
├── utils/
│   └── storage.js
├── App.jsx
└── main.jsx

🖼️ 스크린샷

[seokhwan13]

삭제 다이얼로그로 실수로 삭제되는걸 방지 했네요 좋은거같아요

[luaerix]

삭제 다이얼로그에서 데이터 상태를 명확하게 구분하여 좋은 코드인 것 같습니다.

[Bsbd0205]

삭제 다이얼로그 있는 건 엄청 좋은 것 같아요! 하지만 등록 버튼의 글자는 가로로 해야 가독성이 더 좋을 것 같습니다.

[seung-in-Yoo]

수고하셨습니다! 코드를 직접 고민하고 바꿔보려고 한게 좋은것 같아요

[seung-in-Yoo]

사소하지만 제목도 바꾸시면 더 좋을것 같아요!

[seung-in-Yoo]

이 부분 todos가 undefined나 비어있을 경우 처리가 문제가 있을수도 있다는 생각이 들어서 개선방안을 생각해보셔도 좋을 것 같네요! 예를들면 const lastId = useRef( todos.length ? Math.max(...todos.map((t) => t.id)) + 1 : 1 ); 이런식의 로직도 좋을것 같아요

[Unoguna]

삭제 다이얼로그를 따로 만드신게 인상적이었습니다