[헬스 다이어리 앱 개발] 7편 - 중간점검

이 프로젝트는 앱을 공부하려고 시작한거였고, 간단히 만들 계획이었다.

당연히 따로 스펙을 정하지도 않았었다.

 

하지만 스펙을 정하지 않고 개발을 하니,

중간 중간 추가하고 수정할 것들이 계속 생기고, 구조도 이리저리 바뀌었다.

그러니 두달 정도 소홀히 할 정도로 늘어졌었다.

 

하지 않을 것을 정하는게 얼마나 중요한 지를 체감하며,

지금이라도 구체적인 스펙을 정해보려 한다.

 

 

 

 

우선 앱을 처음 들어가면 런치 스크린이 나온다.

런치 스크린에는 간단한 애니메이션이랑 로고나 문구를 넣을 것이고,

로컬 저장소에서 데이터를 가져온다.

 

헬스 일지 데이터는 이런 식으로 구성한다.

interface SetState {
  weight: number;
  num: number;
}

interface HealthState {
  name: string;
  sets: Array<SetState>;
}

interface DailyRecordState {
  startTime: string;
  endTime: string;
  healths: Array<HealthState>;
}

interface RecordState {
  yearMonth: string;
  dailyRecords: Array<DailyRecordState>;
}

가장 큰 단위 state는 한달치의 운동 일지인 RecordState를 배열로 갖고 있다.

운동기록을 한달치로 관리하는 이유는 달력에서 데이터를 편하게 처리하기 위함이다.

 

 

 

 

런치 스크린 다음엔 홈 스크린이 나온다.

홈 스크린은 달력, 연속 며칠 했는지, 한달동안 몇번 했는지, '오늘 운동하기' 버튼이 있다.

달력은 깃허브의 잔디처럼 운동한 날을 표시해주고, 누르면 해당 날짜의 운동 기록을 조회, 수정할 수 있다.

홈 스크린이 focus 되면 react-native의 useIsFocused를 이용해 리렌더링을 한다.

일지를 수정했을 때 달력 등에 정보를 업데이트하기 위함이다.

 

 

 

 

오늘 운동하기 버튼이나 달력을 누르면 해당 날짜의 운동 일지를 보여주는 스크린이 나온다.

일지를 수정할 수 있고, 없다면 추가할 수 있다.

운동 일지를 추가할 경우, 홈 스크린의 달력뿐만 아니라 연속 며칠했는지, 한달 며칠했는지의 UX가 업데이트 되어야 한다.

따라서 이 둘의 데이터도 redux toolkit으로 관리하고, 일지 수정시 dispatch하는 hook도 만들어야 한다.

 

 

이대로 먼저 만들고, 기능을 추가하거나 수정할 일이 생긴다면 그 때 하자.

 

 

 

 

코드

 

GitHub - junhee-won/health-diary-app