o2o-infinith-demo/docs/AI_DISCOVERY_FRONTEND_HANDOVER.md

AI Discovery · Frontend Handover

2026-08-31 세션 산출물을 INFINITH 프로덕트(React)에 반영하기 위한 인수인계 문서. 시안은 HTML로 확정됐고, 이 문서는 그것을 실제 라우트로 옮기는 데 필요한 전부를 담는다.

---

0. 다음 세션 실행 프롬프트 (복붙용)

docs/AI_DISCOVERY_FRONTEND_HANDOVER.md 를 읽고 AI Discovery 랜딩 페이지를 프로덕트에 구현해줘.

- 시안: docs/reports/landing/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/landing/ai_discovery_landing.html	확정
랜딩 스크린샷 (덱 삽입용)	docs/reports/landing/shots/land_hero.png, land_report.png	확정
POC 제안서 덱 (10장)	docs/reports/viewclinic/02_poc_proposal/Viewclinic_POC_Proposal.pptx / .pdf	확정
덱 빌드 스크립트	docs/reports/viewclinic/02_poc_proposal/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/landing/ai_discovery_landing.html과 시각적으로 일치.
• 390px에서 2열 그리드가 1열로 접히고 헤드라인이 줄바꿈 깨짐 없이 표시.
• 배포: git push 후 vercel --prod 수동 실행 (Gitea 자동 트리거 없음).

8. 이후 백로그 (이번 구현 범위 아님)

• 랜딩 CTA를 실제 진단 신청 폼/파이프라인(discover-channels Edge Function)에 연결.
• 태하(법무법인, 68점 B) 케이스를 두 번째 샘플로 노출할지 결정.
• 덱 스크린샷 자동 갱신 스크립트화 (랜딩 변경 → 캡처 → 크롭 → 덱 리빌드).