105 lines
4.7 KiB
Markdown
105 lines
4.7 KiB
Markdown
# 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>` 으로 개별 배포
|