식단·운동·체중을 날짜별로 기록하고, 커뮤니티에서 건강 정보를 공유하는 풀스택 건강 관리 웹 애플리케이션
기록하고, 분석하고, 공유하는 건강 관리의 전체 흐름을 하나의 앱에서
기획부터 API 설계, UI까지 전부 혼자 구현했어요
날짜 네비게이터로 과거·현재 기록을 자유롭게 탐색해요. 식단·운동·체중이 하나의 화면에 통합되어 있고, 각 섹션은 독립적인 API와 컴포넌트로 구성돼 있어요.
음식 DB 검색(공공 영양 데이터), 즐겨찾기, 직접 입력, 직접 등록 4가지 방식으로 식단을 추가해요. 탄수화물·단백질·지방 배지로 영양 정보를 바로 확인할 수 있어요.
달리기·수영·헬스 등 프리셋 또는 직접 입력으로 운동을 추가해요. 낮음·중간·높음 강도 선택 시 시간 기반 칼로리가 실시간 계산되어 표시돼요.
Chart.js 그라데이션 영역 차트로 체중 변화를 시각화해요. 최신 체중 배지, 엔터키 저장, 빈 상태 가이드까지 세세한 UX를 신경 썼어요.
Toast UI 에디터로 게시글을 작성하고, 카테고리 필터·인기순 정렬로 탐색해요. 계층형 댓글(대댓글), 게시글·댓글 좋아요, 이미지 첨부를 지원해요.
프로필 사진 업로드, 닉네임 변경, 비밀번호 변경 기능. 작성 게시글 수·댓글 수·최근 운동 기록을 활동 요약으로 보여줘요.
프론트부터 백엔드·DB까지 혼자 선택하고 구현했어요
설계 결정과 트레이드오프를 직접 경험했어요
react-modal의 style.content에 background: transparent를 설정하면 CSS 클래스의 배경색이 무시되어 모달이 투명하게 보이는 문제가 있었어요.
overlay에 flexbox 중앙 정렬을 적용하고 style.content에서 시각적 속성을 완전히 제거했어요. CSS 클래스가 배경과 외형을 전담하게 분리해서 해결했어요.
즐겨찾기 API가 foodId만 저장하는 구조라 목록 조회 시 음식명·칼로리 등 상세 정보가 없어 프론트에서 undefined가 표시됐어요.
즐겨찾기 조회 API를 재설계해 Food·UserFoodInfo 테이블을 조인하고 음식 상세 정보를 함께 반환하도록 수정했어요. foodType에 따라 올바른 테이블을 선택해 조회해요.
운동 기록이 로컬 state에만 저장돼 새로고침하면 사라졌어요. 날짜 이동 시에도 해당 날짜의 운동 기록을 불러오지 못했어요.
Exercise 엔티티·레포지토리·컨트롤러를 백엔드에 새로 구현하고, 프론트도 날짜 기반 API 조회·저장·삭제로 전환했어요. 대시보드의 selectedDate를 props로 전달해 날짜 연동도 완성했어요.