# 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. 실행
```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        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`)는 공백 있어 앱 분리 배치.