2.3 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 Demo — AI 마케팅 분석 플랫폼의 프론트엔드 데모. 성형외과(뷰성형외과)를 대상으로 YouTube/Instagram/Facebook/웹사이트를 분석하고, 변환 전략/로드맵/KPI를 제안하는 마케팅 리포트를 보여준다. 현재는 mock 데이터 기반이며 실제 API 연동은 미구현 상태.

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 — 성과 분석

Data flow:

Pages → custom hooks (useReport, useMarketingPlan) → mock data (src/data/)
Hooks return { data, isLoading, error } 패턴 (100ms delay로 API 시뮬레이션)
ScreenshotContext로 리포트 스크린샷 데이터 공유
useExportPDF 훅으로 리포트 → PDF 변환

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 환경변수 필요.

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

Vercel (SPA 모드 — 모든 경로 /index.html로 리라이트)

2.3 KiB Raw Blame History