🍽️ DecodEat

AI 기반 영양정보 분석 및 개인 맞춤 영양 관리 서비스

DecodEat는 제품의 영양성분표를 촬영하면 AI가 자동으로 분석하여 영양정보를 시각화하고, 개인에게 맞는 건강한 제품을 추천해주는 웹 서비스입니다.

📋 목차

• 주요 기능
• 기술 스택
• 시작하기
• 프로젝트 구조
• 개발 팀
• Git Convention

✨ 주요 기능

🔍 AI 영양정보 분석

• 제품 영양성분표 사진 업로드
• AI 기반 자동 영양정보 추출 및 분석
• 드래그 앤 드롭 및 클립보드 지원

📊 영양정보 시각화

• 영양소별 시각적 차트 제공 (Chart.js)
• 권장 섭취량 대비 비교 분석
• 세부 영양소 정보 표시

🎯 개인 맞춤 추천

• 사용자 행동 기반 제품 추천
• 영양소 기반 유사 제품 추천
• 좋아요 기능으로 관심 제품 관리

📚 영양소 백과사전

• 주요 영양소별 상세 정보 제공
• 권장 섭취량 및 효능 안내

🔐 카카오 로그인

• OAuth2 기반 카카오 소셜 로그인
• 자동 토큰 갱신 및 인증 관리

📱 마이페이지

• 개인정보 관리
• 분석 이력 조회
• 좋아요한 제품 목록
• 관리자 패널 (신고 관리)

🛠 기술 스택

Frontend Framework

• React 19.1 - 최신 React 버전
• TypeScript - 타입 안전성
• Vite - 빠른 빌드 도구

라우팅 & 상태 관리

• React Router 7.7 - 클라이언트 사이드 라우팅
• Zustand 5.0 - 가벼운 전역 상태 관리
• TanStack React Query 5.85 - 서버 상태 관리 및 캐싱

스타일링

• Tailwind CSS 4.1 - 유틸리티 우선 CSS
• Pretendard - 한글 폰트

API & 인증

• Axios 1.11 - HTTP 클라이언트
• OAuth2 - 카카오 소셜 로그인
• JWT - 토큰 기반 인증

폼 & 검증

• React Hook Form 7.62 - 폼 상태 관리
• Zod 4.1 - 스키마 기반 데이터 검증

데이터 시각화

• Chart.js 4.5 - 차트 라이브러리
• react-chartjs-2 - React 래퍼

아이콘 & UI

• Lucide React 0.526 - 아이콘 컴포넌트

개발 도구

• ESLint - 코드 품질 관리
• Prettier - 코드 포매팅

🚀 시작하기

필수 요구사항

• Node.js 18 이상
• pnpm (권장)

설치 및 실행

# 의존성 설치
pnpm install
# 개발 서버 실행
pnpm dev
# 프로덕션 빌드
pnpm build
# 빌드 미리보기
pnpm preview
# 린트 검사
pnpm lint

환경 변수

프로젝트 루트에 .env 파일을 생성하고 다음 환경 변수를 설정하세요:

VITE_API_BASE_URL=your_api_base_urlVITE_KAKAO_CLIENT_ID=your_kakao_client_idVITE_KAKAO_REDIRECT_URI=your_redirect_uri

📁 프로젝트 구조

src/
├── apis/ # API 통신 레이어
│ ├── axios.ts # Axios 인스턴스 + 인터셉터
│ ├── auth.ts # 인증 API
│ ├── product.ts # 제품 API
│ ├── productList.ts # 제품 목록 API
│ ├── productDetail.ts # 제품 상세 API
│ ├── enroll.ts # 제품 등록 API
│ ├── like.ts # 좋아요 API
│ ├── analysis.ts # 분석 API
│ ├── report.ts # 신고 API
│ └── adminReports.ts # 관리자 신고 API
│
├── components/ # 재사용 가능한 컴포넌트
│ ├── detail/ # 상세 페이지
│ │ ├── NutritionChart.tsx
│ │ ├── DetailedNutrients.tsx
│ │ ├── RecommendedProducts.tsx
│ │ ├── PieChart.tsx
│ │ └── NutritionEditForm.tsx
│ ├── search/ # 검색
│ │ ├── ProductGrid.tsx
│ │ ├── SearchBanner.tsx
│ │ ├── SearchProductGrid.tsx
│ │ └── ProductGridSkeleton.tsx
│ ├── home/ # 홈
│ │ └── UserBehaviorRecommendation.tsx
│ ├── myPage/ # 마이페이지
│ │ ├── PersonalInfo.tsx
│ │ ├── AnalysisResults.tsx
│ │ ├── LikedProducts.tsx
│ │ └── Settings.tsx
│ ├── admin/ # 관리자
│ │ ├── AdminReports.tsx
│ │ └── AdminReportDetail.tsx
│ ├── enroll/ # 등록
│ │ └── UploadSlot.tsx
│ ├── gnb/ # 네비게이션
│ │ └── TopGNB.tsx
│ └── ui/ # 공통 UI
│ ├── Modal.tsx
│ ├── MessageModal.tsx
│ ├── Pagination.tsx
│ ├── FilterBox.tsx
│ └── Skeleton.tsx
│
├── pages/ # 페이지 컴포넌트
│ ├── HomePage.tsx # 홈
│ ├── DetailPage.tsx # 제품 상세
│ ├── EnrollPage.tsx # 제품 등록
│ ├── SearchPage.tsx # 검색
│ ├── MyPage.tsx # 마이페이지
│ ├── LoginPage.tsx # 로그인
│ ├── OnboardingPage.tsx # 온보딩
│ ├── SupportPage.tsx # 고객 지원
│ ├── NutritionEncyclopediaPage.tsx # 영양소 백과사전
│ └── ErrorPage.tsx # 에러
│
├── hooks/ # 커스텀 훅
│ ├── useAuth.ts # 인증
│ ├── useEnroll.ts # 제품 등록
│ ├── useLike.ts # 좋아요
│ ├── useProduct.ts # 제품 검색
│ ├── useProductList.ts # 제품 목록
│ ├── useProductDetail.ts # 제품 상세
│ ├── useAnalysis.ts # 분석
│ ├── useReport.ts # 신고
│ ├── useAdminReports.ts # 관리자 신고
│ ├── useAdminReportDetail.ts
│ ├── useSearch.ts # 검색
│ └── useMessageModal.ts # 모달
│
├── store/ # Zustand 상태 관리
│ ├── useAuthStore.ts # 인증 상태
│ └── useStore.ts # 전역 상태
│
├── types/ # TypeScript 타입 정의
│ ├── auth.ts
│ ├── product.ts
│ ├── productList.ts
│ ├── productDetail.ts
│ ├── nutrition.ts
│ ├── analysis.ts
│ ├── enroll.ts
│ ├── like.ts
│ ├── report.ts
│ └── common.ts
│
├── utils/ # 유틸리티 함수
│ ├── image.ts # 이미지 압축
│ ├── nutritionUtils.ts # 영양정보 계산
│ └── chartUtils.ts # 차트 데이터 변환
│
├── constants/ # 상수
│ ├── nutrition.ts # 영양소 매핑
│ ├── nutritionEncyclopedia.ts # 백과사전 데이터
│ └── product.ts # 제품 상수
│
├── config/ # 설정
│ └── menuConfig.ts # 메뉴 설정
│
├── layout/ # 레이아웃 컴포넌트
│ ├── RootLayout.tsx # 메인 레이아웃
│ └── AuthLayout.tsx # 인증 레이아웃
│
├── routes/ # 라우팅
│ └── router.tsx # 라우터 설정
│
├── assets/ # 정적 파일
│ ├── icon/ # 아이콘
│ ├── img/ # 이미지
│ └── logo/ # 로고
│
├── App.tsx # 앱 루트
├── main.tsx # 앱 진입점
└── index.css # 글로벌 스타일

👥 개발 팀

역할	이름	GitHub
Frontend Developer	유진	@Yujin1219
Frontend Developer	유상완 (바나)	@wantkdd

📝 Git Convention

Git-flow 전략

• main: 프로덕션 배포 브랜치
• feature: 기능 개발 브랜치

브랜치 네이밍

feature/이름-기능제목#이슈번호

예시: feature/wantkdd-login#1

작업 규칙

1. 모든 작업 전 main에서 최신 코드 pull
2. 개인 작업은 feature 브랜치에서 진행
3. 작업 완료 후 PR 생성
4. 팀원 1명의 리뷰 및 approve 필수
5. Approve 후 main에 merge

커밋 컨벤션

Prefix	설명
start	새 프로젝트 시작
feat	새로운 기능 추가
fix	버그 수정
design	UI/CSS 변경
refactor	코드 리팩토링
settings	설정 파일 변경
comment	주석 추가/변경
dependency	의존성/플러그인 추가
docs	문서 수정
merge	브랜치 병합
deploy	배포
rename	파일/폴더명 수정
remove	파일 삭제
revert	이전 버전으로 롤백

커밋 메시지 예시

feat: 카카오 로그인 기능 구현 #12
fix: 제품 상세 페이지 로딩 오류 수정 #34
design: 마이페이지 반응형 스타일 적용 #56

📄 라이선스

이 프로젝트는 개인 프로젝트이며, 모든 권리는 개발팀에게 있습니다.

🔗 배포

• 배포 플랫폼: Netlify
• 배포 URL: [추후 업데이트]

---

⭐️ Made with ❤️ by DecodEat Team