castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
o2o-infinith-demo/CLAUDE.md

4.7 KiB
Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

INFINITH — AI 마케팅 분석 플랫폼. 성형외과를 대상으로 YouTube/Instagram/Facebook/네이버블로그/네이버플레이스/강남언니를 분석하고, 변환 전략/로드맵/KPI를 제안하는 마케팅 리포트를 생성한다.

프론트엔드(React) + 백엔드(Supabase Edge Functions) 모두 실제 구현 완료. src/data/ mock 데이터는 개발 fallback 용도로만 남아 있으며, 실제 파이프라인은 Supabase Edge Functions에서 실행된다.

Commands

  • npm run dev — 개발 서버 (port 3000)
  • npm run build — 프로덕션 빌드
  • npm run lint — TypeScript 타입 체크 (tsc --noEmit)
  • 테스트 프레임워크 없음

Architecture

Stack: React 19 + TypeScript + Vite 6 + Tailwind CSS 4 + React Router 7

Routes (src/main.tsx):

  • / — 랜딩 페이지
  • /report/loading — 분석 로딩 (Navbar/Footer 숨김)
  • /report/:id — 마케팅 분석 리포트
  • /plan/:id — 마케팅 플랜
  • /studio/:id — 콘텐츠 스튜디오 (AI 이미지 생성)
  • /channels — 채널 연결
  • /distribute — 콘텐츠 배포
  • /performance — 성과 분석

Frontend Data flow:

  1. Pages → custom hooks (useReport, useMarketingPlan) → Supabase DB (marketing_reports 테이블)
  2. Hooks return { data, isLoading, error } 패턴
  3. ScreenshotContext로 리포트 스크린샷 데이터 공유
  4. useExportPDF 훅으로 리포트 → PDF 변환

Backend Pipeline (Supabase Edge Functions):

Phase Function 역할
1 discover-channels 병원 URL → SNS 채널 발견 (registry fast-path → clinics 캐시 → Firecrawl 스크래핑)
2 collect-channel-data 채널별 실제 데이터 수집 (YouTube API, Apify, Naver API, Firecrawl)
3 generate-report Perplexity AI로 리포트 생성 + groundTruth 주입으로 수치 보정
4 generate-content-plan 마케팅 플랜 생성

실제 연동된 API:

  • YouTube Data API v3 — 구독자/조회수/영상 수
  • Apify — Instagram/Facebook 스크래퍼
  • Naver Search API — 네이버플레이스 검색
  • Naver Blog RSS — 공식 블로그 포스트
  • Firecrawl — 홈페이지 footer SNS 링크 추출, 강남언니 스크래핑
  • Perplexity AI — 리포트 JSON 생성
  • Gemini 2.5 Flash — 콘텐츠 이미지 생성 (src/services/geminiImageGen.ts)

주요 DB 테이블 (Supabase):

  • marketing_reports — 리포트 결과 (channel_data, report, analysis_data JSONB)
  • clinic_registry — 병원 SNS 채널 등록 (fast-path 캐시)
  • clinics — 병원 기본 정보 + 14일 TTL 캐시
  • channel_snapshots — 채널별 수집 이력
  • analysis_runs — 파이프라인 실행 로그

Shared utilities (supabase/functions/_shared/):

  • extractSocialLinks.ts — URL → SNS handle 결정론적 추출 (regex 기반)
  • verifyHandles.ts — 핸들 실제 존재 여부 검증
  • dataQuality.ts — isMissingValue(), validateReportQuality()
  • retry.ts — 자동 재시도/타임아웃/rate limit 내장 fetch wrapper

Type definitions in src/types/:

  • report.ts — MarketingReport 및 하위 타입 (YouTubeAudit, InstagramAudit, etc.)
  • plan.ts — 마케팅 플랜 타입
  • studio.ts — 콘텐츠 스튜디오 타입

AI Integration: src/services/geminiImageGen.ts — Gemini 2.5 Flash로 이미지 생성. GEMINI_API_KEY 환경변수 필요.

Environment Variables

Supabase Edge Functions (Supabase Dashboard → Settings → Secrets):

  • YOUTUBE_API_KEY — YouTube Data API v3
  • APIFY_API_KEY — Instagram/Facebook 스크래퍼
  • NAVER_CLIENT_ID / NAVER_CLIENT_SECRET — Naver Search API
  • FIRECRAWL_API_KEY — Firecrawl 스크래핑
  • PERPLEXITY_API_KEY — 리포트 AI 생성

Frontend (.env.local):

  • GEMINI_API_KEY — Gemini 이미지 생성

Styling

  • Tailwind CSS 4 (@theme directive in src/index.css)
  • 폰트: Pretendard (sans), Playfair Display (serif/headings)
  • 색상: primary-900 (#0A1128), accent (#6C5CE7)
  • 상태 색상: status-critical, status-warning, status-good, status-info (각각 bg/text/border/dot 변형)
  • glass-card 클래스: 반투명 글래스모피즘 카드
  • 애니메이션: Motion (framer-motion 후속) 사용

Path Alias

@/ → 프로젝트 루트 (tsconfig.json + vite.config.ts 모두 설정됨)

Deployment

  • Frontend: Vercel (SPA 모드 — 모든 경로 /index.html로 리라이트). git push 후 vercel --prod 수동 실행 필요 (Gitea 자동 트리거 없음)
  • Backend: Supabase Edge Functions — supabase functions deploy <function-name> 으로 개별 배포