My-ToDo

❓My-ToDo?

캘린더를 활용한 투두 리스트

처음으로 진행한 개인 토이 프로젝트로 흔한 아이디어지만 redux를 사용한 상태관리, 토큰 인증과 로그인 인증, 다양한 sns로그인, MySql과 Firebase store 데이터베이스 사용, 캘리더 구현과 배포 등 계속해서 기능을 추가하며 업데이트 해온 서비스 입니다.

🚀배포 링크

https://bdw-my-todo.vercel.app

테스트용 계정

아이디 : test@naver.com

비밀번호 : test12345

직접 가입하셔도 됩니당@

---

🔨기술 스택

✔️Frond-end

✔️Back-end

✔️DB

📅 1차 개발 기간

- 2023.11.23~2023.12.04

📅 2차 개발 기간

- 2024.02.15~2024.02.20

변경 및 추가 사항

1. firebase Authentication
   • 기존에는 로컬환경에서만 로그인 및 회원 가입이 가능했지만 firebase 인증을 통해 배포 환경에서도 로그인 및 회원가입이 가능하도록 변경
2. firebase store
   • 기존의 MySql대신 firebase store를 통해 사용자의 일정을 저장하도록 구현
3. 소셜 로그인
   • 구글, 카카오, 네이버 아이디를 사용해 로그인이 가능하도록 구현
4. 배포 변경
   • 기존에 github page 배포에서 깃허브 push를 통해 자동으로 빌드 후 배포가 가능한 vercel 배포로 변경

😄개발 인원

- 1인 개인 프로젝트

📓 서비스 화면

프로젝트 상세

💡주요 기능

• 구글, 네이버, 카카오 sns로그인
• 캘린더를 통해 사용자가 저장해 놓았던 할일 목록을 날짜별로 미리보기
• 캘린더의 날짜 선택시 해당 날짜의 할일 목록을 확인
• 선택한 날짜의 일정 목록을 수정

구현 상세

• 파일 구조

├── src
│   ├── components               
│     ├── common              
│     ├── config
|     ├── error
|     ├── firebasestore
|     ├── login
|       ├── social
|     ├── main
|       ├── calendar
|       ├── todolist
|     ├── reducer
|     └── signup

• 로그인

이메일 로그인과 sns로그인은 각각의 인증 서비스를 통해 인증을 받습니다.

• 이메일과 google -> firebase

• 카카오 -> 카카오 인증

• 네이버 -> 네이버 인증

• Firebase Store

• 컬렉션 구조

├── 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)

사용자의 할일 목록을 전역에서 사용하기 위해 상태관리 라이브러리인 Redux Store를 사용합니다.

• 컴포넌트에서 Firebase Store에 데이터를 요청하고 응답 받은 데이터를 Redux Store에 저장합니다.

• 이후 컴포넌트에서 필요한 데이터를 Redux Store에 요청하고 스토어는 요청받은 데이터를 반환합니다.

• 캘린더

• 캘린더를 쉽게 구현할 수 있는 라이브러리가 있지만, 원하는 디자인과 캘린더의 각각 날짜에 해당하는 일정의 미리보기 기능을 구현하기 위해 JavaScript의 Date()를 사용해 직접 구현

• 드래그 앤 드롭(react-beautiful-dnd)

• 사용자 경험 향상을 위해 리액트의 라이브러리인 react-beautiful-dnd를 사용

• 드래그를 통해 쉽게 목록 변경가능

• 배포

• Vercel을 통해 서비스를 배포 했습니다.

서비스 영상

신규 회원 가입

default.mp4

sns 로그인

sns.mp4

기존 사용자 서비스영상

default.mp4