kyeongmin
0f0d3fa91f
Mirror of design_agent_front/design-agent/ for shipping alongside backend.
Vite plugin (vitePluginPhaseZApi) endpoints :
- POST /api/run — spawn `python -m src.phase_z2_pipeline` with overrides
- GET /api/sample-mdx?mdx=03/04/05 — fixed sample MDX
- GET /frame-preview/{n} — figma preview thumbnails
- GET /data/runs/{run_id}/{path} — pipeline artifacts (final.html, step*.json, ...)
Env toggle forward (보고용) :
PHASE_Z_ALLOW_RESTRUCTURE / PHASE_Z_ALLOW_REJECT / PHASE_Z_MAX_RANK=32
Components :
- LeftMdxPanel (03/04/05 fix list + section tree)
- SlideCanvas (iframe + slideOverrideCss prop for inline CSS inject)
- FramePanel (label priority + confidence sort)
- LayoutPanel
README with mermaid diagrams covering the 5-step demo flow.
node_modules / dist / .manus-logs / .env excluded via .gitignore.
1.7 KiB
1.7 KiB
Design Agent Frontend MVP Implementation Plan
이 문서는 프론트엔드 MVP 개발 계획 및 Phase Z 시뮬레이션 구현 로드맵입니다.
📅 로드맵
Phase 1: 동적 분석 시뮬레이션 (완료)
- MDX 파일 텍스트 분석 로직 구현 (
STAGE 1) - 섹션 개수에 따른 자동 레이아웃 및 존 매핑 로직 구현 (
STAGE 2) - 분석 결과에 따른 캔버스 동적 렌더링 연결
Phase 2: 사용자 인터랙션 강화 (진행 중)
- 레이아웃 프리셋 변경 시 캔버스 즉시 갱신
- 프레임 선택 시 캔버스 내 카드 스타일 변경 시뮬레이션
- Zone/Region 선택 상태에 따른 시각적 피드백 정교화
Phase 3: 콘텐츠 상세화 및 팝업 시뮬레이션
- MDX 원문 무손실 보존을 위한 팝업 UI 구현
display_strategy(Preview vs Full) 시뮬레이션 로직 추가- 최종 결과물 데이터 구조(JSON) 내보내기 기능
📐 핵심 설계 원칙 (Phase Z 준수)
- Deterministic Mapping: 동일한 MDX 입력에 대해 항상 동일한 초기 레이아웃과 프레임이 제안되어야 함.
- User Override Priority: 사용자의 수동 선택은 시스템 추천보다 우선하며, 명시적으로
overrides객체에 저장됨. - No-Loss Principle: 슬라이드 캔버스 공간 부족으로 생략된 텍스트는 반드시 팝업을 통해 전체 확인이 가능해야 함.
🔗 STAGE별 연결 지점
- STAGE 1 & 2:
designAgentApi.ts의parseMdxFile,generateSlidePlan - STAGE 3:
FramePanel.tsx의candidates매핑 - STAGE 4:
Home.tsx의handleLayoutSelect,handleFrameSelect - STAGE 5:
Home.tsx의Finalize Slide버튼 핸들러