# 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/SCORING.md` — **참여자 채점·심사 SSOT** (공정성 3원칙·배점·랭킹·100만원 심사) ★신규
5. `docs/BACKEND.md` — 백엔드(Firestore·함수·채점·Resend·투표창)
6. (참고) `../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` 통과(12 routes, 6경기 SSG).
- **멀티 경기 구조 (06.09 회의 반영, 2026-06-09)** — 대시보드 + 경기 상세 + 리더보드 stub. 프론트엔드 §1·§2·§3 완료.
  - `/` = 전체 일정 대시보드, `/match/[matchId]` = 경기 상세(6경기), `/leaderboard` = 차기 stub, `/before` = v1 기록용.
  - 상세: 확률 라벨 "OO 승리 확률 %"+국기, 메인 리즌 강조, 이메일 전용 폼, **투표 종료 카운트다운**, 경기별 공유, 결과 보기 분기.
  - "월드컵" 표현 전면 제거 → "글로벌 축구". Crowd엔 "AI 승리 확률과 다름" 라벨.
- 디자인 002/003 토큰 유지(Impact, 민트 #85FCA8, 틸그린 GPT, 클래식 축구공, 화이트 시트, 쿨톤 상금).
- 데이터 전부 **mock**(`getPredictions`/`getCrowd`, 결정론 생성), 백엔드 미연결.
- 배포: https://triplepick-web.vercel.app
- git: `fa68169` init → `5ba653c` /before → `1b9dbd2` Backend Pack → (투표창) → **(멀티경기 06.09) 커밋 대기**.

## 2. 실행
```bash
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                  L1 대시보드: Hero → ScheduleBoard → Footer
app/match/[matchId]/page.tsx  L2 경기 상세(SSG, generateStaticParams 6경기) + generateMetadata
app/leaderboard/page.tsx      L3 리더보드 stub (차기)
app/before/page.tsx           /before (v1 기록용, 자체완결)
app/globals.css               디자인 토큰 (DESIGN.md와 1:1)
lib/types.ts                  도메인 타입 (opensAt/lockAt 포함)
lib/schedule.ts               Group A 6경기 SSOT + matchPhase() + matchesByDate()
lib/mockData.ts               ⚠️ MOCK — getPredictions()/getCrowd() 경기별, matchUrl(), DEMO_FORCE_OPEN
lib/format.ts                 시간·라벨 + winProb()(D3) + dateHeading/timeOnly/dateKey
lib/firebase.ts               클라 초기화 스켈레톤(env)
components/
  Hero.tsx          브랜드 헤더(back 옵션)        ScheduleBoard.tsx  대시보드 경기 리스트
  MatchupHUD.tsx    대결 카드({match})            Arena.tsx          핵심({match,predictions,crowd,shareUrl})
  Countdown.tsx     투표 종료 카운트다운(D7)       TeamFlag.tsx       국기 일반화(KOR png/CZE svg/이모지)
  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/SCORING.md(채점·심사 SSOT) · 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키 제공 대기.
- **채점·심사(100만원)**: **주최측 배제 + 순수 누적 포인트**(점수는 정확도에서만) 확정 → `docs/SCORING.md`. 배점 수치(5/3/2/1/0)만 황 본부장 확정 대기.

## 5. 다음 세션 할 일 (우선순위)
### ✅ A. 멀티 경기 구조 — DONE (2026-06-09)
- 대시보드(`/`) + `/match/[matchId]` 상세(6경기 SSG) + `/leaderboard` stub. `schedule.ts` 6경기 소스.
### ✅ B. 경기 상세 변경 — DONE (2026-06-09)
- 확률 라벨(D3)·이메일만(D5)·서브타이틀 삭제·카운트다운 복원(D7)·결과보기 분기·경기별 공유(D8) 전부 반영.
### 🔴 B'. 백엔드 연동 대기 데이터 (팀 결정 → dev)
- **채점 로직**: `docs/SCORING.md` 그대로 구현(`scorePrediction`/`rank`). 모델=주최측 배제+순수 누적 포인트 확정. **배점 수치(5/3/2/1/0)만** 황 본부장 확정 후 `SCORE` 상수 교체.
- **AI reason 실제 모델 출력**으로 mock 교체. **결과 메일 3시간 후**(D6) 파이프라인.
### 🟠 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`)는 공백 있어 앱 분리 배치.