AI 음식 추천 서비스

Google 소셜 로그인 / 로그아웃

“사용자로서 Google 계정으로 1클릭 로그인하여 내 취향 저장 목록을 개인화하고 싶다.”

• ✓랜딩 페이지에 'Google로 시작하기' 버튼이 표시되며, 클릭 시 Firebase Auth Google 팝업으로 인증된다
• ✓로그인 성공 시 Firestore users 컬렉션에 uid·email·createdAt이 서버 Route Handler를 통해 upsert된다
• ✓로그아웃 버튼 클릭 시 Auth 세션이 해제되고 랜딩 페이지로 리다이렉트된다
• ✓비로그인 상태에서 저장 기능 접근 시 로그인 유도 모달이 표시된다

취향 입력 (규칙 기반 필터 파라미터 수집)

“사용자로서 카테고리·기분·지역을 간단히 선택하여 지금 나에게 맞는 음식 추천을 받고 싶다.”

• ✓카테고리(한식·중식·일식·양식·분식 등), 기분(든든하게·가볍게·매콤하게·달콤하게), 지역(텍스트 직접 입력 또는 드롭다운 선택) 3단계 입력 폼이 제공된다
• ✓모든 항목은 단일 선택이며, 하나 이상 미선택 시 '추천 받기' 버튼이 비활성화된다
• ✓입력값은 URL 쿼리 파라미터(?category=한식&mood=든든하게&area=강남)로 추천 결과 페이지에 전달된다

규칙 기반 음식·음식점 추천

“사용자로서 내가 선택한 취향에 맞는 음식과 음식점 카드를 즉시 확인하고 싶다.”

• ✓쿼리 파라미터(category·mood·area)를 기반으로 Firestore foods 컬렉션을 category·tags 필드로 필터링하고, 매칭된 food_id를 가진 restaurants를 area로 추가 필터링하여 최대 10건을 반환한다
• ✓필터 결과가 0건이면 '조건에 맞는 음식점이 없습니다' 안내와 함께 취향 재입력 버튼을 표시한다
• ✓각 결과 카드는 음식명·카테고리·음식점명·지역 정보를 포함하며, 로그인 사용자에게는 하트(저장) 버튼이 활성화된다
• ✓데이터 로딩 중 스켈레톤 UI를 표시한다

관심 항목 저장 / 저장 취소

“사용자로서 마음에 드는 음식점 카드를 저장하고 나중에 다시 확인하고 싶다.”

• ✓로그인 상태에서 하트 버튼 클릭 시 서버 Route Handler(POST /api/saved)를 통해 saved_items에 user_id·food_id·restaurant_id·savedAt이 저장된다
• ✓이미 저장된 항목의 하트 버튼 클릭 시 Route Handler(DELETE /api/saved/[id])로 해당 문서가 삭제된다
• ✓저장/취소 후 하트 아이콘 상태가 즉시 반영된다(낙관적 업데이트)

저장 목록 조회

“사용자로서 내가 저장한 음식점 카드를 모아보고 빠르게 재확인하고 싶다.”

• ✓로그인 사용자만 접근 가능하며, 비로그인 접근 시 랜딩 페이지로 리다이렉트된다
• ✓saved_items를 savedAt 내림차순으로 조회하여 음식명·카테고리·음식점명·지역 정보를 카드로 표시한다
• ✓각 카드에서 저장 취소(하트 해제)가 가능하며, 목록에서 즉시 제거된다

관리자 음식·음식점 데이터 등록

“관리자로서 음식과 음식점 데이터를 웹 화면에서 직접 등록하여 추천 풀을 관리하고 싶다.”

• ✓Firestore users 문서의 role 필드가 'admin'인 사용자만 /admin 라우트에 접근 가능하며, 그 외 접근 시 홈으로 리다이렉트된다
• ✓음식 등록 폼(name·category·tags 쉼표 구분)과 음식점 등록 폼(name·area·food_id 선택)이 별도 탭으로 제공된다
• ✓등록 요청은 서버 Route Handler(POST /api/admin/foods, POST /api/admin/restaurants)를 통해 처리되며, 서버에서 role 검증 후 Firestore에 저장된다
• ✓등록 성공 시 성공 토스트 메시지와 폼 초기화가 수행된다

M0프로젝트 초기화 및 환경 설정

• •Next.js (App Router) + TypeScript 프로젝트 생성 (npx create-next-app@latest)
• •Firebase 프로젝트 생성 및 Firestore, Auth(이메일/Google 소셜) 활성화
• •.env.local 에 NEXT_PUBLIC_FIREBASE_* 클라이언트 키 및 FIREBASE_PROJECT_ID 환경변수 설정 (코드 하드코딩 금지)
• •firebase-admin, firebase, ts-node 의존성 설치
• •Firebase Hosting 초기화 (firebase init hosting) 및 next.config.js 연동 확인
• •ESLint / Prettier / 절대경로 alias(@/) 설정

M1Firestore 스키마 배포 및 시드

• •firestore.rules 배포 (firebase deploy --only firestore:rules)
• •firestore.indexes.json 배포 (firebase deploy --only firestore:indexes)
• •GOOGLE_APPLICATION_CREDENTIALS 환경변수로 서비스 계정 키 설정 (파일 미커밋)
• •ts-node seed.ts 실행으로 foods(8건) · restaurants(10건) 데모 데이터 시드 확인
• •Firebase 콘솔에서 컬렉션 구조 및 인덱스 생성 상태 검증

M2Firebase Auth 연동 및 사용자 흐름

• •Firebase Auth 클라이언트 초기화 모듈 작성 (lib/firebase.ts)
• •Google 소셜 로그인 + 이메일 로그인 구현
• •로그인 성공 시 users/{uid} 문서 자동 생성 (email, created_at)
• •AuthContext / useAuth 훅으로 전역 인증 상태 관리
• •로그인 필요 페이지에 미들웨어(middleware.ts) 로 리다이렉트 보호 적용
• •관리자 계정에 Firebase Admin SDK로 Custom Claim (admin: true) 부여 스크립트 작성

M3취향 입력 및 음식 추천 기능

• •취향 입력 화면 구현 — 카테고리(한식/일식/중식/양식/분식) + 태그 멀티 선택 UI
• •사용자 취향을 users/{uid} 문서의 preferences 필드에 저장
• •추천 로직 구현 — tags 배열 기반 Firestore array-contains-any 쿼리 (MVP: 룰 기반, ML 없음)
• •추천 결과 화면 — foods 카드 목록 렌더링 (카테고리, 태그 표시)
• •food_id 기반으로 연관 restaurants 조회 및 음식점 카드 표시 (지도 API 없이 텍스트 주소만 표시)
• •추천 결과 로딩 스켈레톤 UI 적용

M4관심 저장 및 저장 목록 기능

• •음식점 카드 '저장' 버튼 클릭 시 saved_items 컬렉션에 문서 생성 (user_id, food_id, created_at)
• •저장 목록 화면 — user_id 필터 + created_at 내림차순 쿼리로 본인 저장 항목만 표시
• •저장 취소(삭제) 기능 구현 — 본인 문서만 삭제 가능 (보안 규칙 적용)
• •중복 저장 방지 로직 — 저장 전 동일 food_id 존재 여부 확인
• •저장 목록에서 해당 음식점 카드로 이동하는 링크 연결

M5관리자 데이터 등록 화면

• •관리자 전용 레이아웃 및 라우트 그룹 (/admin) 생성
• •관리자 진입 시 Custom Claim(admin: true) 검증 — 미충족 시 접근 차단
• •음식(foods) 등록 폼 — name, category, tags 입력 후 Firestore 저장
• •음식점(restaurants) 등록 폼 — name, area, food_id(foods 목록 셀렉트), address, phone 입력
• •등록된 foods/restaurants 목록 테이블 및 삭제 기능 구현
• •모든 관리자 쓰기 요청이 Firestore 보안 규칙(isAdmin 클레임)으로 서버 측 보호되는지 확인

M6랜딩 페이지 및 UI 완성

• •랜딩 페이지 구현 — 서비스 소개, '취향 입력 시작' CTA 버튼
• •Tailwind CSS 기반 공통 컴포넌트 정리 (Button, Card, Badge, Skeleton)
• •반응형 레이아웃 적용 (모바일 우선)
• •로그인/로그아웃 네비게이션 헤더 완성
• •에러 바운더리 및 404 페이지 구현

M7배포 및 MVP 검증

• •Firebase Hosting + Next.js 빌드 연동 확인 (next build && firebase deploy)
• •GitHub Actions CI — lint, build, firebase deploy 자동화
• •Firestore 보안 규칙 통합 테스트 (firebase emulators:start + jest)
• •Hard Constraints 체크리스트 최종 확인 (지도 API·예약·결제·ML 미포함 여부)
• •환경변수 노출 여부 보안 점검 (서비스 계정 키 미커밋, .gitignore 확인)
• •실제 사용자 시나리오(취향입력→추천→저장→목록) E2E 수동 테스트