18740ca800
- 신규 라우트 /discovery → DiscoveryLandingPage, 기존 /discovery/:id 리포트와 공존 - 섹션 9종: Hero(ABMR 루프 + AI 답변 목업) / Why Now / How It Works / Sample Report / 8주 로드맵 / 정직성 스트립 / 최종 CTA - ABMR 루프는 Solution.tsx 다이어그램 구조 복제, AGDP → ABMR 워딩 교체 - 점수·등급·카테고리 %·항목 수 전부 scoreDiscovery 계산값 파생, JSX 수치 하드코딩 없음 (nextGradeTarget·scorePctColor 헬퍼를 discoveryScore에 추가) - ScoreRing에 valueClassName·subLabel 옵션 prop 추가 (하위 호환) - AI 답변 목업 "AEO / GEO 구축 후 목표 상태 예시" 라벨 유지, 연락처 o2oteam@o2o.kr 단일 - 시안 HTML·핸드오버 문서·POC 덱 산출물 포함 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WgWoJZAvvzMxTpWeenZSia
95 lines
6.5 KiB
Markdown
95 lines
6.5 KiB
Markdown
# AI Discovery · Frontend Handover
|
||
|
||
2026-08-31 세션 산출물을 INFINITH 프로덕트(React)에 반영하기 위한 인수인계 문서.
|
||
시안은 HTML로 확정됐고, 이 문서는 그것을 실제 라우트로 옮기는 데 필요한 전부를 담는다.
|
||
|
||
---
|
||
|
||
## 0. 다음 세션 실행 프롬프트 (복붙용)
|
||
|
||
```
|
||
docs/AI_DISCOVERY_FRONTEND_HANDOVER.md 를 읽고 AI Discovery 랜딩 페이지를 프로덕트에 구현해줘.
|
||
|
||
- 시안: docs/reports/ai_discovery_landing.html (픽셀 기준, 이 파일이 정답)
|
||
- 라우트: /discovery (index) 신규, 기존 /discovery/:id 리포트 페이지와 공존
|
||
- 재사용: Navbar/Footer(BI 워드마크), ScoreRing, Solution.tsx의 루프 다이어그램 구조(AGDP → ABMR 워딩)
|
||
- 데이터: src/data/discovery_viewclinic.ts + src/lib/discoveryScore.ts 실측값만 사용, 수치 하드코딩 금지
|
||
- 카피 규칙: 존댓말 문장형 타이틀, 엠대시 금지, break-keep, AI 답변 목업에 "구축 후 목표 상태 예시" 라벨 유지, 연락처는 o2oteam@o2o.kr만
|
||
- 완료 기준: npm run lint 통과, /discovery가 시안과 시각적으로 일치, 모바일 1열 폴백
|
||
끝나면 git push + vercel --prod 까지.
|
||
```
|
||
|
||
---
|
||
|
||
## 1. 이번 세션에서 만든 것
|
||
|
||
| 산출물 | 경로 | 상태 |
|
||
|---|---|---|
|
||
| 랜딩 시안 (단일 HTML, 픽셀 정답) | `docs/reports/ai_discovery_landing.html` | 확정 |
|
||
| 랜딩 스크린샷 (덱 삽입용) | `docs/reports/shots/land_hero.png`, `land_report.png` | 확정 |
|
||
| POC 제안서 덱 (10장) | `docs/reports/Viewclinic_POC_Proposal.pptx` / `.pdf` | 확정 |
|
||
| 덱 빌드 스크립트 | `docs/reports/build_viewclinic_poc_deck.py` | 재실행 가능 |
|
||
|
||
시안 HTML은 외부 의존성이 Google Fonts(Playfair Display, Noto Sans KR) 하나뿐인
|
||
단일 파일이다. 랜딩을 수정하면 스크린샷 재캡처 → 덱 리빌드 순서로 갱신한다
|
||
(스크린샷 크롭 좌표는 배경색 감지로 잡았다: 히어로 0–1384px, 리포트 밴드는 #F4F6FB 행 범위).
|
||
|
||
## 2. 구현 대상: 라우트와 페이지
|
||
|
||
- 신규 라우트: `/discovery` → `DiscoveryLandingPage.tsx` (src/main.tsx에 추가)
|
||
- 기존 라우트: `/discovery/:id` → `DiscoveryReportPage.tsx` (수정 불필요, 랜딩의 "샘플 리포트 보기"가 `/discovery/viewclinic`으로 연결)
|
||
- Navbar/Footer는 전역 레이아웃이 이미 감싼다. 랜딩 시안의 자체 네비·푸터 마크업은 옮기지 말 것.
|
||
|
||
## 3. 섹션 → 컴포넌트 매핑 (시안 위에서 아래 순서)
|
||
|
||
| 시안 섹션 | 컴포넌트 제안 | 재사용/참조 |
|
||
|---|---|---|
|
||
| 히어로 (72px 헤드라인 + 배지 + CTA 2개) | `discovery/DiscoveryHero.tsx` | `Hero.tsx` 구조, `.text-gradient` |
|
||
| ABMR 루프 카드 (다크) | `discovery/AbmrLoop.tsx` | **`Solution.tsx` 46–130행 다이어그램을 복제 후 워딩만 교체** |
|
||
| AI 답변 목업 카드 | `discovery/AiAnswerMock.tsx` | glass-card |
|
||
| Why Now 다크 밴드 (12종 / 0건 / 35~70%) | `discovery/WhyNow.tsx` | |
|
||
| How It Works (Audit·Build·Prove) | `discovery/HowItWorks.tsx` | glass-card + EFE6FF 아이콘 스퀘어 |
|
||
| 샘플 리포트 (48점 링 + A~F 바 + 칩 3장) | `discovery/SampleReport.tsx` | **`ScoreRing.tsx` 그대로**, 바 색상은 `getScoreColor()` 로직 재사용 |
|
||
| 8주 로드맵 타임라인 | `discovery/Roadmap.tsx` | |
|
||
| 정직성 인용문 + 3필 | `discovery/HonestyStrip.tsx` | |
|
||
| 최종 CTA (다크) | `discovery/DiscoveryCta.tsx` | |
|
||
|
||
## 4. 디자인 실측값 (시안에 이미 적용된 프로덕션 토큰)
|
||
|
||
- **BI 워드마크**: Playfair Display Black(900) 30px, tracking 0.05em, `linear-gradient(to right, #4F1DA1, #021341)` 텍스트 클립. Navbar/Footer 컴포넌트에 이미 있으므로 재사용.
|
||
- **DS Primary pill 버튼**: `px-10 py-4 text-lg font-medium rounded-full shadow-xl`, hero 변형은 `from-[#4F1DA1] to-[#021341]` + ArrowRight. `MultiChannelInput.tsx` 195행 참조.
|
||
- **text-gradient**: `#0A1128 → #3b5998` 클립 (index.css `.text-gradient`).
|
||
- **히어로 배경**: radial `#e0e7ff → #faf5ff → #fdf2f8` + 블롭 (Hero.tsx와 동일 계열).
|
||
- **ScoreRing**: strokeWidth 8, 트랙 `#f1f5f9`, 점수 구간색 ≤40 `#C084CF` / ≤60 `#8B9CF7` / ≤80 `#7C6DD8` / 80+ `#6C5CE7`. 48점은 `#8B9CF7`.
|
||
- **상태 칩**: index.css의 status-critical/warning/good/info 파스텔 토큰 (치명/보완/강점 칩).
|
||
- **다크 카드**: `#0F1B45` bg + `#2A3A6B` border (Why Now 통계 카드).
|
||
- 루프 회전 애니메이션: `animate-[spin_20s_linear_infinite]` (Solution.tsx와 동일).
|
||
|
||
## 5. 데이터 연결
|
||
|
||
- 수치는 전부 `src/data/discovery_viewclinic.ts`(`DISCOVERY_VIEWCLINIC`)와 `src/lib/discoveryScore.ts` 계산 결과에서 가져온다. **48, 92%, 20% 등을 JSX에 하드코딩하지 말 것** (재진단 시 점수가 바뀐다).
|
||
- 카테고리 바 6개(A~F)는 discoveryScore의 카테고리별 pct를 순회 렌더.
|
||
- 시안의 고정 수치는 2026-08-28 실측 스냅샷이다. 값이 다르게 나오면 데이터 쪽이 정답.
|
||
|
||
## 6. 카피·정직성 규칙 (이번 세션에서 확정된 것)
|
||
|
||
1. 타이틀은 존댓말 문장형으로 통일 ("~없습니다", "~올립니다"). 반말 종결·명사구 타이틀 금지.
|
||
2. 엠대시 금지, 은유 금지, `break-keep` 적용 (기존 텍스트 스타일 규칙과 동일).
|
||
3. AI 답변 목업에는 **"AEO / GEO 구축 후 목표 상태 예시" 라벨을 반드시 유지**한다. 현재 상태로 오인되게 만들지 않는다.
|
||
4. 허위 도메인·이메일 금지. 연락처는 `o2oteam@o2o.kr` (Navbar 문의 mailto는 기존 `contact@o2o.kr` 유지).
|
||
5. 시장 통계를 새로 만들어 넣지 않는다. 시안의 3개 수치(12종 크롤러 / 네이버 기여 0건 / Direct 유실 35~70%)는 근거 있는 실측·문헌 값이며, 이 밖의 수치 추가는 근거 확인 후에만.
|
||
6. 순위·노출 보장형 문구 금지. "언급률과 신뢰구간으로 보고" 프레임 유지.
|
||
|
||
## 7. 완료 기준·배포
|
||
|
||
- `npm run lint` (tsc --noEmit) 통과.
|
||
- 1440px에서 `/discovery`가 `docs/reports/ai_discovery_landing.html`과 시각적으로 일치.
|
||
- 390px에서 2열 그리드가 1열로 접히고 헤드라인이 줄바꿈 깨짐 없이 표시.
|
||
- 배포: `git push` 후 `vercel --prod` 수동 실행 (Gitea 자동 트리거 없음).
|
||
|
||
## 8. 이후 백로그 (이번 구현 범위 아님)
|
||
|
||
- 랜딩 CTA를 실제 진단 신청 폼/파이프라인(`discover-channels` Edge Function)에 연결.
|
||
- 태하(법무법인, 68점 B) 케이스를 두 번째 샘플로 노출할지 결정.
|
||
- 덱 스크린샷 자동 갱신 스크립트화 (랜딩 변경 → 캡처 → 크롭 → 덱 리빌드).
|