o2o-triple-pick/HANDOFF.md

TriplePick Web — HANDOFF (다음 세션 진입점)

최종 갱신: 2026-06-09 KST

새 세션은 이전 대화 기억이 없다. 이 문서 → 아래 4개 SSOT 순서로 읽고 시작하면 그대로 구현 가능.

📌 새 세션 시작 시 읽을 순서

1. 이 파일 (현재 상태·파일맵·실행)
2. docs/DESIGN.md — 룩앤필/디자인 시스템 SSOT (컬러·폰트·컴포넌트·자산·Do/Don't)
3. ../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md — 할 일 전체(우선순위·금요일 스코프)
4. docs/BACKEND.md — 백엔드(Firestore·함수·채점·Resend·투표창)
5. (참고) ../Worldcup 2026/000. Plan/Landing 기능정의서 — TriplePick 2026.md / Landing PRD — TriplePick 2026.md

0. 프로젝트

TriplePick = "AI(GPT·Claude·Gemini) vs 너" 글로벌 축구 승부예측 랜딩. (※ "월드컵" 명칭 법적 사용불가) 픽 제출 → 같은 AI 확인 → 공유 → 포인트/100만원 챌린지. 모바일 우선.

1. 현재 상태 (DONE)

• Next.js 16 + React 19 + Tailwind v4 (App Router, TS). npm run build 통과.
• 단일 경기(한국 vs 체코) v2 구현 — 디자인 002/003 + 사용자 디렉션 반영(Impact, 민트 #85FCA8, 틸그린 GPT, 클래식 축구공, 화이트 시트, 쿨톤 상금).
• 인터랙션: 픽 → (닉네임)이메일 → 제출 → 결과(같은 AI) → Crowd 증가 (전부 mock, 백엔드 미연결).
• 배포: https://triplepick-web.vercel.app (/ = 현재, /before = v1 기록용).
• git: fa68169 init → 5ba653c /before → 1b9dbd2 Backend Pack → (투표창) 커밋들.

2. 실행

cd /Users/haewonkam/Claude/AIO2O/triplepick-web
npm install
npm run dev -- --port 3737   # http://localhost:3737

3. 파일 맵 (현행)

app/layout.tsx      메타·OG·SEO(ko)
app/page.tsx        Hero → MatchupHUD → Arena → Footer (단일 경기)
app/before/page.tsx /before (v1 기록용, 자체완결)
app/globals.css     디자인 토큰 (DESIGN.md와 1:1)
lib/types.ts        도메인 타입 (opensAt/lockAt 포함)
lib/schedule.ts     Group A 6경기 일정(KST) SSOT — opensAt=킥오프-48h, lockAt=킥오프
lib/mockData.ts     ⚠️ MOCK AI예측/Crowd + DEMO_FORCE_OPEN 플래그
lib/format.ts       시간·라벨 포맷
lib/firebase.ts     클라 초기화 스켈레톤(env)
components/Hero.tsx · MatchupHUD.tsx · Arena.tsx(핵심) · BallIcon.tsx · Footer.tsx
public/icons/       ball.png(투명) profile.png gpt/claude/gemini kor.png
firestore.rules · firestore.indexes.json · firebase.json · .env.example · scripts/seed.mjs
docs/DESIGN.md · docs/BACKEND.md

4. 확정 결정 (구현에 반영됨/반영할 것)

• 투표창: 오픈 = 킥오프 D-2(-48h, opensAt) / 마감 = 킥오프 정각(lockAt, 경기 전까지). DEMO_FORCE_OPEN=true로 데모는 항상 열림 → 운영 시 false.
• AI 예측: 매일 KST 0시 1회 생성, 그날 고정(immutable), 남은 경기만. (현재 mock)
• 결과 메일: 경기 3시간 후, 맞춘 사람만 + 다음경기/100만원 링크 (Resend).
• Firebase: 사용자가 새 프로젝트 직접 생성 → config 6키·서비스계정·Resend키 제공 대기.
• 상금 약관(포인트 배점 수치): 미정 → 팀 결정 후 dev. R2.

5. 다음 세션 할 일 (우선순위)

🔴 A. 멀티 경기 구조 (06.09 회의 최대 변경)

• 단일 / → 전체 일정 대시보드 + /match/[matchId] 상세 + (차기)/leaderboard
• lib/schedule.ts 6경기를 소스로 대시보드/동적 상세 렌더

🔴 B. 경기 상세 변경 (금요일 핵심)

• 확률 라벨 "승리 예측 팀 승리 확률"로, 닉네임 제거(이메일만), 서브타이틀 삭제, 투표 카운트다운 복원, 예측하기→결과보기 전환, 경기별 공유

🟠 C. Firebase 연결 (BACKEND.md 그대로)

• npm i firebase(설치됨) → .env.local 6키 → mockData 읽기 → Firestore, Arena.confirmSubmit mock → submitPrediction 콜러블
• firebase deploy --only firestore:rules,firestore:indexes → node scripts/seed.mjs → functions 생성/구현

🟡 D. 폴리시

• Pretendard 웹폰트, OG 동적 공유카드(@vercel/og), 카카오 공유 SDK, 접근성

금요일(체코전) 스코프 = 랜딩 + 투표만. 리더보드·응원가·영상·댓글·AI적중률·공유포인트 = 차기.

6. 주의

• 룩앤필은 docs/DESIGN.md 토큰을 따른다(임의 변경 금지). 변경 시 DESIGN.md부터 갱신.
• mockData AI예측은 플레이스홀더 → 실제 모델 출력으로 교체.
• 경로 공백 없음(triplepick-web). 상위 캠페인 폴더(Worldcup 2026)는 공백 있어 앱 분리 배치.