[Project] Run-Record

Run Record

꽤 오랜 취미생활로 러닝을 즐겨하고 있던 중, 스마트폰과 스마트워치의 '나이키 런 클럽' 이라는 어플리케이션의 연동으로 폰에는 자동적으로 달리기를 시작하고 종료함에 따라 저장이 된다. 스마트폰의 기록처럼 웹에도 기록을 해보고 싶다는 생각으로 이 프로젝트를 시작하게 되었다.

주요 기능

1. Running Record CRUD 기능

• 러닝 일지 추가 : 오른쪽 상단의 '추가하기' 버튼을 통해 입력 폼 모달창을 통해 기본적인 정보(달린 날짜, 거리, 시간, 페이스)를 저장하고 '제출하기' 버튼을 클릭한다.
• 러닝 일지 삭제 : 생성된 기록 일지의 '휴지통' 버튼을 클릭하면 그 기록은 삭제된다.
• 러닝 일지 편집 : 생성된 기록 일지의 '연필' 버튼을 클릭하면 수정 폼 모달창을 통해 날짜 외의 정보를 편집할 수 있다.

2. 캘린더

• 월별 캘린더 구현 : 오늘 날짜 에 해당하는 월별을 렌더링하고, 좌우 버튼을 통해 달을 이동시킬 수 있다.
• 월별 러닝 기록 요약 : 기록된 일지의 월별마다의 달린 정보(거리, 러닝 수, 평균 페이스, 시간)를 요약하여 한 눈에 보여준다.
• 월별 러닝 기록 동그라미 표시 : 월별 캘린더에서 달렸던 날짜을 보기 좋게 동그랗게 색칠한 느낌으로 렌더링한다.

어려웠던 점

1. 캘린더

• 캘린더의 현재 달, 요일, 날짜 렌더링
• 러닝 일지가 기록된 날짜에 동그라미 표시

2. 러닝 기록 계산

• 웹 구현에 있어서라기 보다는 계산 문제였지만 월별 기록이다 보니, 필터기능과 입력폼에서 input text 값으로 받아온 값을 숫자형으로 계산을 해야했기 때문에 조금 복잡했다.

더 구현해보고 싶은 점

리덕스 사용
달마다 가장 페이스가 좋은 기록 표시 기능
달 이동마다 오른쪽 기록 일지에서 해당 월 자동 스크롤 기능