84 lines
5.1 KiB
Markdown
84 lines
5.1 KiB
Markdown
# 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`(공백 있음)이라 앱을 분리 배치함.
|