[SideProject] - 개인 프로젝트 - TeddyLog 01. 구조

in Programming on Sideproject, React, Next, Firestore


이번에 개인프로젝트를 해볼까 하다가 내가 하고 싶은 프로젝트를 진행해보기로 했다.

요즘 내가 자꾸 운동을 해야하는데… 하는 말만 하고 제대로 운동을 못하고있다… 운동을 시작하려고 하면 의지박약으로 작심삼일이 되곤 한다.

내 옆자리에 있는 친구는 매일 기록을 하며 운동을 하고있어서 그걸 보고 이걸 만들어봐야 겠다고 생각했다.

이걸로 운동을 꼭 해야할텐데…

간단한 투두리스트에 달력 기능을 추가해서 내 습관 기록을 하는 앱을 만들어보고자 한다.

React Web과 PWA 로 만들어보고자 한다. (스터디 목표) 또한 React, Redux-toolkit을 사용하고 Redux-Thunks, Redux-Saga를 모두 사용해보고자 한다. (아마 다 만들고 여러 버전 파생으로 수정해볼듯?) (다 만들고 나면 Recoil 버전도?)

앱 화면정의서 부터 간단하게 피그마로 그려보았다.

화면 정의서

https://www.figma.com/file/0oeONo5ynfC55khH1haXeu/TeddyLog?node-id=0%3A1

  1. 로그잇 & 회원가입 FirebaseAuth email 로그인만 지원 예정이고 (당장은) 간단하게 닉네임, 이메일, 비밀번호만 받으려고 한다.

    스크린샷 2022-08-09 오후 8.38.47.png

  2. 홈 화면 (투두 리스트) Fab버튼으로 간단하게 할일을 추가할 수 있고, 길게 눌러서 삭제도 할 수 있다. 해당 추가된 내용은 서버에 기록되어(Firestore) 다음날 자동으로 셋팅되도록 개발해보자.

    스크린샷 2022-08-09 오후 8.40.40.png

  3. 달력 그리기 귀찮아서 … 으로 써놨지만 달력이다. 좌, 우로 현재 달을 기준으로 이동할 수 있으며 내가 목표를 다 달성한 날은 스탬프효과를 주려고 한다. (나중에는 클릭하면 그날 했던 내용을 보여주려고 한다.)

    스크린샷 2022-08-09 오후 8.41.12.png

  4. 프로필 화면 프로필화면은 간단하게 이메일, 닉네임을 보여주고 로그아웃, 알람 (Push 기능 , PWA를 제대로 써보자) 을 설정 가능하다.

    스크린샷 2022-08-09 오후 8.42.10.png

데이터 스키마

이제 가장 중요한 데이터를 정리해보자.

먼저 FirebaseAuth와 Firestore collection DB를 쓸 예정이다.

teddyLog ERD

스크린샷 2022-08-09 오후 8.58.33.png

  1. Users
    • 유저 컬랙션으로 각각의 Doc이 한명의 유저이다.
    • 이메일, 닉네임, 자기소개 필드로 String으로 이뤄져있고 나머지 정보는 FirebaseAuth에 저장되어있다.
  2. GoalHabits
    • Users의 SubCollection으로 각 유저별 자신이 만든 목표이다.
    • 앱상에서는 홈에서 편하게 추가 및 삭제가 가능하다.

    • 다음날이 되면 자동으로 HabitsLog에 오늘 날짜로 GoalHabits가 매핑되어 생성된다.

      Cloud function을 사용하려고 한다.

  3. HabitsLog
    • Users의 SubCollection으로 유저별 데일리 습관을 기록하는 컬랙션이다.

    • 해당 날짜와 성공 여부를 가지고 있다.

      성공 여부는 Cloud Function Trigger를 통해 구성하려고 한다. (boolean 값이다)

  4. Habits
    • Users의 SubCollection의 HabitsLog의 SubCollection으로 매일 매일 실제로 카운팅하는 습관 내용이다.

    • title과 goalCount는 GoalHabits에서 자동으로 복사되어 생성된다.

      현재는 goalCount 수정은 없고, 생성과 삭제만 생각하자.

    • habitRef는 GoalHabit의 주소값이며 추후 기능을 위해 넣어놓았다.

Action 정리

Redux를 사용하기 위해 먼저 Action들을 정리해보자 (기능 명세서)

1. Auth (FirebaseAuth)

  1. 로그인
  2. 회원가입
  3. 로그아웃

2. User (Firestore)

  1. 유저 생성 및 정보가져오기
  2. 유저 정보 가져오기

여기서 User는 Auth와 따로 동작한다. 로그인 성공 이후 해당 토큰값으로 Firestore를 통해 유저 정보를 가져오거나 생성해야 한다.

3. Habit

  1. 습관 가져오기 (오늘 날짜) - 날짜 변동 가능
  2. 습관 기록 가져오기 (이번 달) - 달 변동 가능
  3. 습관 추가
  4. 습관 삭제
  5. 습관 카운트 증가
  6. 습관 카운트 감소

4. Setting

  1. 푸쉬알람 toggle

Store도 위 slice 구조로 만들면 될것 같다.

Store

1. Auth

  • token
  • email
  • uid

2. User

  • email
  • nickname
  • introduce

3. Habit

  • habits : array
    • title : string
    • goalCount : number
    • currentCount : number
  • currentDate : date
  • habitMonthlyLogs : array
    • habits : array
      • title : string
      • goalCount : number
      • currentCount : number
      • docRef : string

4. Setting

  • isPushOn : boolean

이제 제대로 개발에 들어가보자!

아마 개발을 하다보면 이런 저런 변경사항이 생길것 같다.

변경 사항은 아래에 기록을 남겨두도록 하자