🍽️ 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_url
VITE_KAKAO_CLIENT_ID=your_kakao_client_id
VITE_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