🍽️ 칼로리 체크 앱

목표 칼로리를 정해두고 먹은 칼로리를 차감하며, 음식 데이터를 검색해 무게(g)만 입력하면 칼로리를 자동 계산해주는 칼로리 트래킹 웹앱입니다.

🎨 디자인: Toss 스타일의 깔끔한 모바일 퍼스트 UI(연한 회색 배경 · 흰색 카드 · 둥근 모서리 · 은은한 그림자), Pretendard 웹폰트. PC에서 열어도 가운데에 모바일 폭(max-width: 480px)으로 표시됩니다.

📱 페이지 구성 (하단 탭으로 이동)

페이지	경로	설명
🏠 홈	index.html	오늘 남은 목표 칼로리(대형 강조) + 게이지 바, 직접 입력·빠른 추가, 기록 목록
🔎 칼로리 체크	search.html	음식 검색 → 무게(g) 입력 → 칼로리 자동 계산 → 오늘 기록에 추가
📅 달력	calendar.html	월별 달력에 일별 목표 달성(O)/초과(X) 표시 + 달성률 통계
🍚 음식 관리	foods.html	음식 데이터(이름·100g당 kcal·분류) 추가/삭제 (DB 저장)

✅ 구현된 기능

홈 (index.html)

• 상단에 남은 칼로리를 가장 크게 강조 → 먹은 칼로리만큼 숫자가 줄어듦
• 섭취 비율을 보여주는 게이지 바(% 텍스트 포함), 목표 초과 시 빨간색
• 목표 칼로리 설정, 음식 이름(선택)+칼로리 직접 입력, 빠른 추가(+100/+200/+300/+500)
• 기록 목록 + 개별 삭제, 전체 삭제
• localStorage 자동 저장 + 하루 지나면 기록 자동 초기화(목표는 유지)

달력 (calendar.html)

• 월별 달력 UI(이전/다음 달 이동)
• 그날 먹은 칼로리가 목표 이하면 O(초록), 초과하면 X(빨강) 로 표시
• 오늘 날짜는 파란 테두리로 강조, 현재까지의 섭취량으로 실시간 판정
• 하단에 이번 달 달성/초과 일수 + 달성률 통계

칼로리 체크 (search.html)

• 음식 이름으로 실시간 검색 (DB에 저장된 데이터에서 검색, 인터넷 검색 X)
• 음식 선택 → 무게(g) 입력 → 100g당 kcal × g ÷ 100 으로 자동 계산
• "오늘 기록에 추가하기" → 홈의 기록과 공유되어 남은 칼로리에 반영
• 추가 시 토스트 알림

음식 관리 (foods.html)

• 음식 이름 + 100g당 칼로리 + 분류(선택) 입력해 DB에 저장
• 등록된 음식 목록 보기 + 삭제
• 여기서 추가한 음식은 칼로리 체크 검색에 바로 나타남

🗂️ 파일 구조

index.html        홈 (대시보드)
search.html       칼로리 체크 (검색/계산)
calendar.html     성취 달력 (월별 O/X)
foods.html        음식 관리 (음식 DB CRUD)
css/style.css     디자인 시스템(Toss 스타일) + 하단 탭 바
data/foods.json   기본 음식 데이터(시드) 20종
js/store.js       공통 기록 저장소 (목표/먹은 기록 + 달력 히스토리, localStorage)
js/foodStore.js   음식 DB (로컬 JSON 시드 + localStorage CRUD)
js/home.js        홈 로직
js/search.js      검색·계산 로직 (FoodStore 사용)
js/calendar.js    달력 렌더링 로직
js/foods.js       음식 관리 로직 (FoodStore CRUD)
README.md         문서

💾 데이터 저장

1) 오늘의 기록 (localStorage)

• 키: calorie-check-v1
• 형식: { "date": "2026-06-19", "goal": 2000, "items": [ { "name": "흰쌀밥 150g", "cal": 195 } ] }
• 사용 중인 브라우저에만 저장됩니다.

1-2) 달력 히스토리 (localStorage)

• 키: calorie-history-v1
• 형식: { "2026-06-18": { "goal": 2000, "eaten": 1800, "success": true }, ... }
• 하루가 지나 기록이 초기화될 때, 그날의 달성 여부(eaten ≤ goal) 를 자동으로 누적 기록합니다.
• 달력 페이지가 이 데이터로 O/X를 그립니다. (오늘은 진행 중이라 현재 섭취량으로 실시간 판정)

2) 음식 데이터 (로컬 JSON 시드 + localStorage)

• 모듈: js/foodStore.js (FoodStore)
• 키: calorie-foods-v1
• 필드: id, name(음식 이름), per100g(100g당 kcal), category(분류)
• 동작 방식:
  • 최초 실행 시 data/foods.json 의 기본 음식 20종으로 자동 시드합니다. (fetch 가 막히는 file:// 환경에서는 foodStore.js 내장 기본 데이터로 대체)
  • 이후 사용자가 추가/삭제한 내용은 localStorage 에 영구 저장됩니다.
• API (모두 Promise 반환):
  • FoodStore.list() — 전체 음식 목록(이름순)
  • FoodStore.add({ name, per100g, category }) — 음식 추가
  • FoodStore.remove(id) — 음식 삭제
• ⚠️ 음식 데이터는 사용 중인 브라우저(기기)에만 저장됩니다. 기기 간 공유가 필요하면 추후 Supabase/Firebase 등 클라우드 DB로 FoodStore 구현만 교체하면 됩니다.
• 기본 데이터 20종(흰쌀밥, 닭가슴살, 삶은 계란, 고구마, 바나나 등)이 들어 있습니다.

🚀 사용 흐름 예시

1. 음식 관리에서 자주 먹는 음식을 등록 (예: 흰쌀밥 130, 김밥 150)
2. 칼로리 체크에서 "흰쌀밥" 검색 → 선택 → 150 입력 → 약 195kcal 계산 → 추가
3. 홈에서 남은 칼로리가 자동으로 줄어든 것을 확인

🔮 다음 단계 추천 (선택)

• 음식 데이터 수정(편집) 기능
• 분류별 필터 / 즐겨찾기
• 일자별 기록 히스토리 + 주간 그래프 (Chart.js)
• 탄수화물·단백질·지방 등 영양소 입력
• 다크 모드

🌐 배포

온라인에 게시하려면 상단의 Publish 탭에서 원클릭으로 배포하세요. 라이브 URL이 제공됩니다.