5.1 KiB

Raw Blame History

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. 실행 방법

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 프로젝트)

사용자(나)에게 요청할 것 ⬇ (새 세션이 물어볼 항목)

새 Firebase 프로젝트 생성 후: projectId, 웹앱 config 6키 (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId)
Firestore 사용 설정(Native 모드), 리전 선택(asia-northeast3 서울 권장)
(선택) 결과 알림 이메일 발송용 키(Resend/SendGrid)
도메인 결정(triplepick.ai 등) — 미정이면 Firebase Hosting 기본 도메인

연결 작업 순서

npm i firebase + lib/firebase.ts(초기화, env에서 config 로드)
.env.local에 NEXT_PUBLIC_FIREBASE_* 6키
lib/mockData.ts → lib/data.ts로 교체: getMatch / getAIPredictions / getCrowdStats Firestore 읽기
components/Experience.tsx의 confirmSubmit mock → submitPrediction(Firestore write + 트랜잭션 crowd 증분)으로 교체
Firestore 보안 규칙 작성(기능정의서 §7): 쓰기 검증(마감·outcome·score·nickname), device_id 중복 방지
시드: matches/ai_predictions 문서 입력(현재 mockData 값 사용)
Cloud Functions: onResultSet → scoreAll(채점), subscribeResult, OG generateShareCard
GA4 이벤트 연결(기능정의서 §6), UTM 보존
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(공백 있음)이라 앱을 분리 배치함.

5.1 KiB Raw Blame History