[헬스 다이어리 앱 개발] 8편 - 기능 구현하기

저번에 짠 스펙대로 개발을 시작했고, 기존 코드를 거의다 갈아엎었다.

그래도 완성까지 80% 정도는 구현한 것 같아서 뿌듯하다.

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

 

 

 

 

런치 스크린

 

우선 앱에 처음 들어갔을 때, 보이는 런치 스크린이다.

Launch Screen

아직은 텍스트만 달랑 있지만, 나중에 애니메이션이나 로고를 추가할 예정이다.

 

 

// src/components/screens/LaunchScreen.js

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { useDispatch } from "react-redux";
import { setDiaries } from "../../features/diaries/diariesSlice";
import { getAsyncStorage } from "../../modules/AsyncStorageHelper";

export default function LaunchScreen({ navigation }) {
  const dispatch = useDispatch();
  useEffect(() => {
    (async function () {
      const timer = new Promise((resolve, reject) =>
        setTimeout(() => resolve(true), 3000)
      );
      await Promise.all(
        [timer, getAsyncStorage("healthDiaryAppStoarge")]
      )
        .then(([res1, res2]) => {
          dispatch(
            setDiaries(
              res2.diaries || [
                {
                  yearMonth: "2022-09",
                  diaries: new Array(32).fill(null),
                },
              ]
            )
          );
          navigation.replace("HomeScreen");
        }
      );
    })();
  });
  return (
    <View style={styles.container}>
      <Text>LaunchSceren</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

런치 스크린 컴포넌트 코드다.

런치 스크린이 렌더링된 후, 핸드폰의 스토리지에서 앱에 필요한 데이터를 가져온다.

핸드폰 스토리지 접근은 react-native-async-storage 라이브러리를 이용한다.

가져온 데이터는 redux-toolkit을 이용해 전역으로 관리한다.

 

asyncStorage에서 데이터를 가져오는 함수 getAsyncStorage는 useEffect안에서 호출된다.

데이터를 빨리 갖고 와도 바로 홈화면으로 넘어가는 것이 아니라 어느 정도 런치 스크린을 유지하기 위해,

3초 후에 이행되는 Promise와 같이 Promise.all로 관리한다.

그리고 promise.all을 사용했기 때문에 만약 타이머가 끝나도 getAsyncStorage가 끝나지 않았다면 스크린이 계속 유지된다.

 

 

 

 

홈 스크린

 

런치 스크린 다음 렌더링되는 홈 스크린이다.

 

Home Screen

홈 스크린에서는 주요 정보들을 보여준다.

 

운동한 날짜들은 달력에 표시된다.

또 이번 달 운동 횟수와 오늘까지 연속 며칠 했는지도 계산해서 보여준다.

홈 스크린에서는 react-redux의 useSelector을 이용해 필요한 데이터를 가져온다.

 

운동하기 버튼을 클릭하면 오늘의 다이어리 스크린이,

달력의 날짜를 클릭하면 해당 날짜의 다이어리 스크린이 나온다.

다이어리 스크린에서는 운동을 추가하거나 수정할 수 있다.

 

 

 

 

다이어리 스크린

 

Diary Screen

홈 화면에서 운동하기 버튼을 눌러 들어온 다이어리 스크린이다.

UX는 일단 컴포넌트끼리 구분하기 위해서 대충 배경색만 넣어놨다.

상단바에 날짜가 보이고, 아래에 운동 시작 시간, 종료 시간, 운동 추가 버튼이 있다.

 

 

시작 시간이나 종료 시간을 누르면 키보드가 올라와서 값을 수정할 수 있다.

 

 

운동 추가 버튼을 누르면 운동을 선택할 수 있는 모달창이 활성화된다.

나중에 운동 종류가 추가되면 어깨, 하체 등 부위 태그를 만들어서 부위별로 운동을 분류해서 보여주는 것이 좋을 것 같다.

 

 

벤치 프레스 버튼을 눌러 운동을 추가하였다.

무게나 숫자를 눌러 값을 수정하거나 세트 추가 버튼을 눌러 세트를 추가할 수 있다.

 

 

운동과 세트를 추가하였다.

상단바 오른쪽을 보면 저장하기 버튼이 생긴 것을 볼 수있다.

만약 기록을 수정하거나 추가하면 저장하기 버튼이 활성화되서 변경사항을 저장할 수 있도록 만들었다.

 

 

상단바의 저장하기 버튼을 누르면 변경사항이 저장되고 홈스크린으로 돌아온다.

달력의 오늘 날짜가 표시되었고, 이번달 운동 횟수와 연속 횟수도 업데이트 되었다.

 

 

테스트 삼아 과거 기록을 추가했다.

표시도 잘 되고, 횟수 계산도 잘 되는 것을 확인했다.

 

 

다음주는 내 미적감각을 살려 UX를 다듬어야 겠다.