Skip to content

Decodeat/FE

Repository files navigation

🍽️ DecodEat

AI 기반 μ˜μ–‘μ •λ³΄ 뢄석 및 개인 맞좀 μ˜μ–‘ 관리 μ„œλΉ„μŠ€

DecodEatλŠ” μ œν’ˆμ˜ μ˜μ–‘μ„±λΆ„ν‘œλ₯Ό μ΄¬μ˜ν•˜λ©΄ AIκ°€ μžλ™μœΌλ‘œ λΆ„μ„ν•˜μ—¬ μ˜μ–‘μ •λ³΄λ₯Ό μ‹œκ°ν™”ν•˜κ³ , κ°œμΈμ—κ²Œ λ§žλŠ” κ±΄κ°•ν•œ μ œν’ˆμ„ μΆ”μ²œν•΄μ£ΌλŠ” μ›Ή μ„œλΉ„μŠ€μž…λ‹ˆλ‹€.

πŸ“‹ λͺ©μ°¨

✨ μ£Όμš” κΈ°λŠ₯

πŸ” 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

About

No description, website, or topics provided.

Resources

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages