캘린더를 활용한 투두 리스트
처음으로 진행한 개인 토이 프로젝트로 흔한 아이디어지만 redux를 사용한 상태관리, 토큰 인증과 로그인 인증, 다양한 sns로그인, MySql과 Firebase store 데이터베이스 사용, 캘리더 구현과 배포 등 계속해서 기능을 추가하며 업데이트 해온 서비스 입니다.
아이디 : test@naver.com
비밀번호 : test12345
직접 가입하셔도 됩니당@
- 2023.11.23~2023.12.04 - 2024.02.15~2024.02.20
- 1인 개인 프로젝트
- firebase Authentication
- 기존에는 로컬환경에서만 로그인 및 회원 가입이 가능했지만 firebase 인증을 통해 배포 환경에서도 로그인 및 회원가입이 가능하도록 변경
- firebase store
- 기존의 MySql대신 firebase store를 통해 사용자의 일정을 저장하도록 구현
- 소셜 로그인
- 구글, 카카오, 네이버 아이디를 사용해 로그인이 가능하도록 구현
- 배포 변경
- 기존에 github page 배포에서 깃허브 push를 통해 자동으로 빌드 후 배포가 가능한 vercel 배포로 변경
- 구글, 네이버, 카카오 sns로그인
- 캘린더를 통해 사용자가 저장해 놓았던 할일 목록을 날짜별로 미리보기
- 캘린더의 날짜 선택시 해당 날짜의 할일 목록을 확인
- 선택한 날짜의 일정 목록을 수정
├── src
│ ├── components
│ ├── common
│ ├── config
| ├── error
| ├── firebasestore
| ├── login
| ├── social
| ├── main
| ├── calendar
| ├── todolist
| ├── reducer
| └── signup이메일 로그인과 sns로그인은 각각의 인증 서비스를 통해 인증을 받습니다.
-
이메일과 google -> firebase
-
카카오 -> 카카오 인증
-
네이버 -> 네이버 인증
-
컬렉션 구조
├── users - collection (유저 목록)
│ ├── uid - doc (회원가입한 유저의 uid)
│ ├── all_todo_list - collection (날짜별 할일 목록)
│ ├── date - doc (저장된 날짜)
│ ├── todo_list <Array> - field (해당 날짜의 할일 목록)
│ ├── todo_title <map-string> - field (제목)
│ ├── todo_id <map-number> - field (번호)
│ └── todo_checked <map-boolean> - field (체크)
데이터를 조회하기 위한 uid는 회원가입한 유저에게 발급되는 uid를 사용합니다. 해당 유저의 all_todo_list 컬렉션에는 저장한 날짜를 고유 문서로 가지며, 저장된 날짜에는 todo_list 목록을 필드로 저장합니다.
사용자의 할일 목록을 전역에서 사용하기 위해 상태관리 라이브러리인 Redux Store를 사용합니다.
-
컴포넌트에서 Firebase Store에 데이터를 요청하고 응답 받은 데이터를 Redux Store에 저장합니다.
-
이후 컴포넌트에서 필요한 데이터를 Redux Store에 요청하고 스토어는 요청받은 데이터를 반환합니다.
-
캘린더를 쉽게 구현할 수 있는 라이브러리가 있지만, 원하는 디자인과 캘린더의 각각 날짜에 해당하는 일정의 미리보기 기능을 구현하기 위해 JavaScript의 Date()를 사용해 직접 구현
-
사용자 경험 향상을 위해 리액트의 라이브러리인 react-beautiful-dnd를 사용
-
드래그를 통해 쉽게 목록 변경가능
-
Vercel을 통해 서비스를 배포 했습니다.