jeongdopark/H-Logger

💡운동 기록 데이터 시각화 프로젝트입니다.

TypeScript

💡 Health-Logger : 운동 기록 시각화 서비스

목차

프로젝트 소개
기능 소개
개발 이야기
기술 스택

프로젝트 소개

💡 운동 기록과 기록된 데이터를 시각화하는 웹 서비스입니다.

🔗 배포 링크 : hlogger.site

각 날짜에 운동, 식단, 간단 회고, 점수를 기록할 수 있습니다.
기록된 데이터는 Calendar, Report 페이지에서 확인할 수 있습니다.
- Calendar Page : 달력 형식의 컴포넌트에 날짜마다 기록을 확인할 수 있습니다.
- Report Page
  - 운동 : 일 년간의 운동 기록을 확인할 수 있습니다. 기록된 점수에 따라 색상이 다릅니다.
  - 몸무게 : 몸무게 기록을 SVG로 구현된 Line Chart로 확인할 수 있습니다.
  - 미션 : 미션 목록을 확인할 수 있습니다.
미션을 통해 기간 내의 몸무게, 운동 횟수를 목표 설정을 할 수 있습니다.

기능 소개

회원가입 / 로그인 & 달력 페이지

Google 회원가입 및 로그인이 가능합니다.
Guest로 둘러보실 수 있습니다.
각 날짜의 기록을 확인할 수 있습니다.

상세 페이지 ( 기록 CRUD )

캘린더의 날짜를 클릭하면 상세 페이지로 이동합니다.
해당 날짜의 기록을 할 수 있습니다.

기록 페이지

운동 : 일 년간의 운동 기록을 확인할 수 있습니다. 기록된 점수에 따라 색상이 다릅니다.
몸무게 : 몸무게 기록을 SVG로 구현된 Line Chart로 확인할 수 있습니다.
미션 : 미션 목록 확인 및 미션 현황을 확인할 수 있습니다.

미션 등록

미션을 통해 기간 내의 몸무게, 운동 횟수를 목표 설정을 할 수 있습니다.

개발 이야기

기술 스택

React Typescript Context-API React-Query styled-components Firebase AWS GitHub-Actions

현재 진행률

70%