국립목포대학교 융합소프트웨어 학과 3학년 캡스톤 프로젝트, AI 식단 추천 프로그램의 프로토타입입니다. NutrAI는 사용자의 식단 기록, 신체 정보, 목표를 기반으로 섭취 현황을 한눈에 보여주고 향후 리포트 및 식단 추천을 제공하는 웹 애플리케이션입니다. 본 프로젝트는 프론트엔드 데모 버전(v0.1) 으로, 모든 데이터는 로컬 스토리지에 저장됩니다.
NutrAI를 실행하기 위한 권장 환경은 다음과 같습니다.
| 구분 | 사양 |
|---|---|
| 운영체제 | Windows 10 이상 / macOS / Linux |
| 런타임 | Node.js 18 이상 |
| 패키지 매니저 | npm 또는 yarn |
| 브라우저 | Chrome, Edge, Safari 최신 버전 |
| 프레임워크 | Next.js 16 (App Router) |
| 언어 | TypeScript |
| 스타일 | Tailwind CSS |
⚠️ 본 프로젝트는 서버/DB 없이 클라이언트(LocalStorage) 기반으로 동작합니다.
git clone https://github.com/your-id/food-web.git
cd food-web
npm installnpm run dev브라우저에서 아래 주소로 접속합니다.
http://localhost:3000
-
아이디 / 비밀번호 기반 회원가입
-
3단계 가입 플로우
- 계정 정보 (이름, 아이디, 이메일, 비밀번호)
- 신체 정보 (성별, 나이, 키, 몸무게)
- 목표 설정 (감량/유지/증량, 활동량, 선호 태그)
-
가입 정보는 localStorage에 저장
- 가입한 아이디/비밀번호로 로그인
- 로그인 성공 시
/dashboard로 이동 - 로그인 상태는 새로고침 후에도 유지됨
- 오늘 섭취 칼로리
- 목표 대비 달성률
- 남은 칼로리
- 연속 기록 일수
- “프로필 수정” 버튼을 통해 신체/목표 정보 수정 가능
- 아침 / 점심 / 저녁 / 간식 구분
- 음식명과 칼로리 입력
- 날짜별 기록 관리
- 기록 데이터는 localStorage에 저장
- 날짜 기준 섭취 요약
- 누적 섭취 현황 확인
- (현재는 기본 구조 및 UI 중심의 데모 기능)
- 사용자 목표 및 섭취 현황 기반 추천 UI
- 향후 AI 추천 로직 연동을 고려한 구조
food-web/
├─ app/
│ ├─ (auth)/ # 로그인 / 회원가입
│ ├─ (app)/ # 로그인 이후 영역
│ │ ├─ dashboard/ # 홈(대시보드)
│ │ ├─ logs/ # 식단 기록
│ │ ├─ reports/ # 리포트
│ │ └─ recommendations/ # 식단 추천
│ └─ layout.tsx
│
├─ components/
│ ├─ layout/ # AppShell, Sidebar, TopBar
│ ├─ signup/ # 회원가입 단계 컴포넌트
│ ├─ profile/ # 프로필 수정 모달
│
├─ lib/
│ ├─ auth.client.ts # localStorage 인증/유저 관리
│ ├─ health.ts # 칼로리/BMR 관련 유틸
│
├─ types/
│ └─ signup.ts
│
└─ README.md-
모든 데이터는 브라우저 localStorage에 저장됩니다.
-
주요 키:
food.user: 사용자 계정 및 프로필food.session: 로그인 세션food.logs: 식단 기록 데이터
⚠️ 실제 서비스용이 아닌 데모/학습 목적의 구조입니다.
- 서버 인증 (JWT / OAuth)
- DB 연동 (PostgreSQL, MySQL 등)
- AI 기반 식단 추천
- 영양소(탄/단/지) 분석
- 차트 시각화 고도화
- 모바일 UI 개선
본 프로젝트는 학습 및 개인 프로젝트 목적으로 제작되었습니다. 상업적 사용 전에는 별도의 검토가 필요합니다.