6.3 KiB
6.3 KiB
TriplePick Web — HANDOFF (다음 세션 진입점)
최종 갱신: 2026-06-09 KST
새 세션은 이전 대화 기억이 없다. 이 문서 → 아래 4개 SSOT 순서로 읽고 시작하면 그대로 구현 가능.
📌 새 세션 시작 시 읽을 순서
- 이 파일 (현재 상태·파일맵·실행)
docs/DESIGN.md— 룩앤필/디자인 시스템 SSOT (컬러·폰트·컴포넌트·자산·Do/Don't)../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md— 할 일 전체(우선순위·금요일 스코프)docs/SCORING.md— 참여자 채점·심사 SSOT (공정성 3원칙·배점·랭킹·100만원 심사) ★신규docs/BACKEND.md— 백엔드(Firestore·함수·채점·Resend·투표창)- (참고)
../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:
fa68169init →5ba653c/before →1b9dbd2Backend Pack → (투표창) → (멀티경기 06.09) 커밋 대기.
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 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) +/leaderboardstub.schedule.ts6경기 소스.
✅ 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.local6키 →mockData읽기 → Firestore,Arena.confirmSubmitmock →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)는 공백 있어 앱 분리 배치.