# TriplePick Web — HANDOFF (다음 세션용)

최종 업데이트: 2026-06-08 KST
작성: 프론트엔드 R1(mock) 완료 시점

> 이 문서는 **새 세션에서 이어받기** 위한 것. 새 세션은 이전 대화 기억이 없으니 여기 + 아래 기획 문서만 보고 작업한다.

## 0. 이 프로젝트가 뭔가
2026 월드컵 **TriplePick** AI 승부예측 랜딩. 한국 vs 체코 단일 경기 R1.
사용자가 GPT·Claude·Gemini 예측을 보고 자기 픽을 제출 → 같은 선택 AI 확인 → 공유 → 100만원 챌린지.

기획 SSOT (상위 폴더):
- `../Worldcup 2026/000. Plan/Landing PRD — TriplePick 2026.md`
- `../Worldcup 2026/000. Plan/Landing 기능정의서 — TriplePick 2026.md`
- 디자인: `../Worldcup 2026/000. Plan/002. Landing Visuals/TriplePick2026 Profile image/`

## 1. 현재 상태 (DONE — 프론트 R1, mock 데이터)
- Next.js 16 + React 19 + Tailwind v4 (App Router, TS)
- 모바일 우선, 다크 그린 스코어보드 톤 (디자인 002/003 정합)
- 구현 섹션: TopBar(카운트다운·참여수·CTA) / Hero / MatchCard / AIPredictions(3모델 confidence바) / Experience(픽·제출·결과·공유·Crowd) / PrizeChallenge / Footer(법무 4고지)
- 인터랙션 검증 완료: 픽 선택 → 닉네임 → 제출 → 결과(같은 AI 계산) → Crowd 실시간 증가
- `npm run build` 통과

## 2. 실행 방법
```bash
cd /Users/haewonkam/Claude/AIO2O/triplepick-web
npm install        # 최초 1회
npm run dev -- --port 3737
# http://localhost:3737
```

## 3. 파일 맵
```
app/layout.tsx        메타데이터·OG·SEO (ko)
app/page.tsx          Hero → MatchupHUD → Arena → Footer
app/globals.css       테마 토큰, .sheet(레이어드 화이트), .bracket(HUD), .btn-mint, .gold-*
lib/types.ts          도메인 타입 (Firestore 변환기에 재사용)
lib/mockData.ts       ⚠️ MOCK — Firebase 연결 시 여기부터 교체
lib/format.ts         라벨/시간/퍼센트 포맷
components/Hero.tsx          헤더 + 후킹 (다크)
components/MatchupHUD.tsx    Match01→Final + 코너브래킷 + 녹색글로우 VS (003 대결 강조)
components/Arena.tsx         ⚠️ 레이어드 화이트 시트(AI예측+픽+결과) + 골드 상금 + Crowd (client) — submit이 mock
components/Footer.tsx        고지 (003 fine print + 법무)
```

> 디자인 정합: 002(레이어드 화이트 백그라운드) + 003(매칭 대결 강조·Match01→Final·골드 ₩1,000,000·Crowd 가로바). 버튼 민트 #85FCA8(--mint). 모델 컬러 GPT #19c37d / Claude #e8814a / Gemini #5b8cff.
> 참고: 002/003에 없는 sticky 카운트다운 TopBar는 디자인 충실성을 위해 제거함(PRD의 카운트다운/마감 로직은 Firebase 단계에서 헤더 또는 픽 옆에 재도입 가능). 세그먼트 기본 선택 없음(픽 강제) — 목업은 한국 승 선택 상태로 표시되어 있으니 기본값 원하면 Arena의 useState(outcome) 기본값 지정.

## 4. 다음 세션 할 일 — Firebase 연결 (NEW 프로젝트)

### 사용자(나)에게 요청할 것 ⬇ (새 세션이 물어볼 항목)
1. **새 Firebase 프로젝트 생성** 후: `projectId`, 웹앱 config 6키
   (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId)
2. Firestore 사용 설정(Native 모드), 리전 선택(asia-northeast3 서울 권장)
3. (선택) 결과 알림 이메일 발송용 키(Resend/SendGrid)
4. 도메인 결정(triplepick.ai 등) — 미정이면 Firebase Hosting 기본 도메인

### 연결 작업 순서
1. `npm i firebase` + `lib/firebase.ts`(초기화, env에서 config 로드)
2. `.env.local`에 NEXT_PUBLIC_FIREBASE_* 6키
3. `lib/mockData.ts` → `lib/data.ts`로 교체: `getMatch / getAIPredictions / getCrowdStats` Firestore 읽기
4. `components/Experience.tsx`의 `confirmSubmit` mock → `submitPrediction`(Firestore write + 트랜잭션 crowd 증분)으로 교체
5. Firestore 보안 규칙 작성(기능정의서 §7): 쓰기 검증(마감·outcome·score·nickname), device_id 중복 방지
6. 시드: matches/ai_predictions 문서 입력(현재 mockData 값 사용)
7. Cloud Functions: `onResultSet → scoreAll`(채점), `subscribeResult`, OG `generateShareCard`
8. GA4 이벤트 연결(기능정의서 §6), UTM 보존
9. `firebase init hosting` + `next build` 배포

### 데이터 모델·API·채점·인수조건
→ `기능정의서 §3~§8` 그대로 구현. 타입은 `lib/types.ts`에 이미 정의됨.

## 5. 남은 폴리시/TODO (R1 마감 전)
- [ ] 결과 카드 문구 "선택입니다.나머지" 사이 공백 추가(Experience.tsx)
- [ ] 공유 카드 OG 동적 이미지(@vercel/og) — 현재 텍스트 공유만
- [ ] 카카오 공유 SDK 연동(국내 1순위)
- [ ] 폰트: Pretendard 웹폰트 로드(현재 시스템 폴백)
- [ ] 국기 이모지 → 에셋 이미지(선택)
- [ ] 마감(lockAt) 지난 상태 QA, device_id 중복 제출 QA
- [ ] 접근성(터치 타깃·대비) 점검

## 6. 주의
- `lib/mockData.ts`의 AI 예측은 **플레이스홀더**. 발행 전 실제 GPT/Claude/Gemini JSON으로 교체.
- 경로에 공백 없음(`triplepick-web`) — 툴링 안전. 상위 캠페인 폴더는 `Worldcup 2026`(공백 있음)이라 앱을 분리 배치함.