Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4e281a20d8e7acfa771a72384e2c45b0f6407dc5
C.E.L_Slide_test2/Front/PROCESS.md
kyeongmin 0f0d3fa91f feat(frontend): add Front/ — Vite/React frontend with backend pipeline integration 
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.
2026-05-14 14:48:42 +09:00

2.9 KiB
Raw Blame History

Design Agent Frontend MVP - Phase Z Simulation

이 문서는 design-agent 프론트엔드 프로젝트가 백엔드 파이프라인(Phase Z)의 각 단계와 어떻게 연결되는지 설명합니다.

📋 STAGE-to-CODE 매핑 가이드

본 MVP는 백엔드 없이도 파이프라인의 흐름을 시뮬레이션할 수 있도록 설계되었습니다.

STAGE 1: MDX 분석 (Normalization)

  • 백엔드 로직: section_parser.py (H2, H3 태그 및 텍스트 블록 추출)
  • 프론트엔드 시뮬레이션: designAgentApi.ts 내 parseMdxFile()
    • 파일의 텍스트를 읽어 실제 #, ##, ### 패턴을 분석합니다.
    • 결과를 NormalizedContent 객체로 변환합니다.

STAGE 2: 레이아웃 매칭 (Zone Mapping)

  • 백엔드 로직: layout_selector.py (섹션 개수/성격에 따른 8개 프리셋 선택)
  • 프론트엔드 시뮬레이션: designAgentApi.ts 내 generateSlidePlan()
    • 분석된 섹션 개수에 따라 single, horizontal-2, grid-2x2 등을 자동으로 결정합니다.
    • 각 섹션을 1280x720 캔버스의 특정 Zone에 할당합니다.

STAGE 3: 프레임 매칭 (V1~V4)

  • 백엔드 로직: block_reference.py (Figma 프레임 DB와 콘텐츠 매칭)
  • 프론트엔드 시뮬레이션: mockDesignAgentData.ts 및 FramePanel.tsx
    • 각 Zone(또는 Region)에 대해 V4 매칭 점수가 높은 Top-3 프레임을 제안합니다.

STAGE 4: 사용자 조정 (Override)

  • 백엔드 로직: pipeline.py (사용자 수동 선택값 반영)
  • 프론트엔드 구현: Home.tsx 및 slidePlanUtils.ts
    • 사용자가 선택한 Layout이나 Frame 정보를 UserSelection.overrides에 저장합니다.
    • applyLayout, applyFrame 함수가 이 상태 변화를 관리합니다.

STAGE 5: 최종 조립 및 검증

  • 백엔드 로직: block_assembler.py (Jinja2 템플릿 조립 및 Selenium 검증)
  • 프론트엔드 구현: 하단 액션 바의 Finalize Slide 버튼
    • 현재 구성된 플랜 데이터를 서버로 전송할 준비가 된 지점입니다.

🛠️ 핵심 파일 구조

  • client/src/services/designAgentApi.ts: 파이프라인 단계별 로직 시뮬레이션 핵심.
  • client/src/types/designAgent.ts: Phase Z 위계(Slide > Zone > Region > Frame) 정의.
  • client/src/components/SlideCanvas.tsx: 16:9 비율 및 레이아웃 프리셋 시각화.
  • client/src/utils/slidePlanUtils.ts: 사용자 선택 및 데이터 가공 유틸리티.

🚀 향후 통합 계획

  1. API 교체: designAgentApi.ts의 시뮬레이션 함수들을 실제 백엔드 엔드포인트 호출로 교체합니다.
  2. 실시간 프리뷰: 백엔드에서 생성된 final.html을 캔버스 내 iframe 등으로 직접 렌더링하도록 확장합니다.
  3. 팝업 연동: display_strategy에 따른 상세 원문 보기 기능을 실제 MDX 원문과 연결합니다.
Reference in New Issue View Git Blame Copy Permalink