← 갤러리로 돌아가기

Fitness Tracker

6개월 PPL 스플릿 운동 플랜과 인바디 기록을 관리해요.

피트니스헬스플래너

이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.

데모 보러 가기

🛠️ 개발 가이드

실제 운영 중인 fitness-tracker 저장소의 화면과 데이터 구조를 그대로 가져오고, 저장 방식만 localStorage로 바꿨어요.

기술 스택

Next.jsReact원본 디자인 그대로 이식

핵심 구현 포인트

  • 원본의 UI 컴포넌트와 CSS를 거의 그대로 옮겨와 디자인을 100% 재현했어요.
  • 6개월 PPL(푸시/풀/다리) 스플릿을 요일별 고정 배열로 정의하고 날짜만 매핑해요.
  • 인바디 기록은 날짜순 배열에 누적해서 추이를 보여줘요.

이렇게 만들면 돼요

  1. 원본 저장소를 클론해서 실제 컴포넌트 구조를 확인해요.
  2. 디자인은 그대로 유지하면서 포트폴리오에 필요한 화면만 선별해 이식해요.
  3. 서버/DB 저장 로직만 localStorage 기반으로 교체해요.

참고 파일

components/gallery/FitnessTrackerDemo.jsx