86 lines
6.3 KiB
Markdown
86 lines
6.3 KiB
Markdown
# 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`)는 공백 있어 앱 분리 배치.
|