완그릇
중·노령·질환 고양이 보호자가 내 아이 조건에 맞는 사료를 이유와 함께 추천받고, 현재 사료와 비교해 전환 판단까지 돕는 웹 서비스. 자세한 기획·아키텍처는 docs/dev-plan.md.
현재 진행 단계 — M1 위저드까지 완료
- ✅ M0 셋업 (Next.js 15 / TS / Tailwind 3.4 / Pretendard / 디자인 토큰·primitives 포팅 / 랜딩 페이지)
- ✅ M1 위저드 (
/onboarding/{basics,diet,health,goal} · 게스트 Zustand 스토어 · 사진 업로드 슬롯 · Supabase 마이그레이션·Storage 정책 SQL · @supabase/ssr 클라이언트·미들웨어)
- ⏳ M2~M5 — 추천 엔진, 비교, OAuth, QA, 런칭 (별도 세션)
시작하기
1. 환경 변수
.env.example을 .env.local로 복사 후 채우세요. Supabase 키는 GH 이슈 #3 참조.
cp .env.example .env.local
2. 의존성
npm 캐시 권한 이슈가 있어 별도 캐시 디렉터리 사용을 권장합니다.
npm install --legacy-peer-deps --cache /tmp/npm-cache-wangrut
3. Supabase 로컬 (선택)
supabase start # 로컬 stack (config.toml 참조)
supabase db reset # 마이그레이션 적용 + seed.sql 실행
4. 개발 서버
npm run dev
http://localhost:3000
스크립트
npm run dev — 개발 서버npm run build — 프로덕션 빌드npm run typecheck — 타입체크npm run lint — ESLintnpm run test — Vitest (현재 56 tests, 도메인 로직 위주)
계획 대비 알려진 차이
| 영역 | 계획 | 현재 | 사유 |
|---|
| 폼 라이브러리 | react-hook-form + zod (plan §5.4) | Zustand store + Zod safeParse | persist와 RHF 동기화 복잡성 회피. Zod 검증은 동일하게 적용됨. M3 서버 라우트에서 한 번 더 검증(plan의 "방어선 2겹") 예정. |
| 위저드 슬라이드 전환 | 디자인 컨셉 (plan §2.4) | 라우트 기반 전환 | 라우트 기반이라 브라우저 뒤로/딥링크가 정상 작동. 시각적 슬라이드 트랜지션은 추후 Framer Motion으로 |
| 위저드 URL 가드 | (명시 없음) | 직접 URL 입력 시 step skip 가능 | 의도. 라우트 기반의 자연스러운 동작. 다음 버튼은 여전히 disable됨 |
디렉터리
src/
├── app/ # Next.js App Router
│ ├── page.tsx # 랜딩
│ └── onboarding/{basics,diet,health,goal}/
├── components/
│ ├── ui/ # primitives (포팅된 디자인 코드)
│ ├── layout/ # TopNav, Footer
│ └── domain/ # PhotoUploadSlot 등
├── lib/
│ ├── domain/ # types, constants(HEALTH_OPTIONS), schemas, ingredient-synonyms, importance
│ ├── supabase/ # browser/server/middleware client
│ ├── storage/ # 이미지 압축 (HEIC→JPEG)
│ ├── guest-store.ts # Zustand persist
│ └── cn.ts
├── middleware.ts # Supabase auth 세션 리프레시
└── styles/globals.css
supabase/
├── migrations/ # profiles, cats + RLS / Storage 정책
├── config.toml # 로컬 stack 설정
└── seed.sql
docs/
├── dev-plan.md # v2 기획서
└── design/ # 디자인 코드 (참조용)
사용자 직접 처리 필요한 작업
GitHub 이슈 label:setup으로 정리되어 있습니다:
| # | 항목 | 차단 여부 |
|---|
| #3 | Supabase 프로젝트 3개 | blocking |
| #4 | Vercel 프로젝트 2개 | blocking |
| #5 | Google OAuth | |
| #6 | Kakao OAuth + Custom OIDC | blocking (M3) |
| #7 | Anthropic API 키 | |
| #8 | 도메인 | |
| #9 | 수의사 자문 컨택 | blocking (M2) |
| #10 | 사료 DB 시드 20개 | blocking (M2) |
| #11 | Supabase Storage 버킷 | |
| #12 | GA4 + Search Console | |
| #13 | 쿠팡·네이버 제휴 | |
| #14 | 법무 검수 | |
