To Do List

1. Overview

react-hook-form과 react-beautiful-dnd를 활용하여 board와 to-do를 손쉽게 생성하고, 드래그 앤 드롭을 통해 편리하게 관리할 수 있는 작업 관리 애플리케이션입니다.

배포 주소: https://yyyrin.github.io/to-do-list/

2. 주요 기능

2.1. Board 및 To-Do 관리

Recoil을 활용하여 board와 to-do의 실시간 생성 및 업데이트 구현
react-hook-form을 사용하여 폼을 구성하였고, 엔터 키를 통해 board와 to-do 생성 가능

2.2. 드래그 앤 드롭 기능

react-beautiful-dnd를 활용하여 드래그 앤 드롭으로 board의 순서를 바꾸거나, to-do를 다른 board로 이동하거나 같은 board 내에서 다른 위치로 이동 구현

2.3. 수정과 삭제 기능

board 제목 옆의 수정 아이콘을 클릭하여 수정 모드로 전환하면, 제목을 수정한 후 엔터 키를 누르면 변경된 제목이 즉시 저장됨
- to-do도 동일하게 수정 가능
board 제목 옆의 삭제 아이콘을 클릭하여 해당 board 삭제 가능
- to-do도 동일하게 삭제 가능
to-do를 드래그하면 휴지통 아이콘이 표시되고, 휴지통 아이콘에 to-do를 드롭하면 해당 to-do가 삭제됨

2.4. 로컬 스토리지와 동기화

localStorage에서 데이터를 가져오거나 저장하여 사용자가 앱을 닫았다가 다시 열어도 이전 상태를 유지
Recoil 상태가 변경될 때마다 자동으로 localStorage와 동기화

3. Tech Stack

React
TypeScript
styled-components
Recoil
Vite
React Hook Form
react-beautiful-dnd
lottie-react

4. Quick start

git clone https://github.com/yyyrin/to-do-list.git
npm install
npm run dev