# Design Agent Frontend MVP Implementation Plan

이 문서는 프론트엔드 MVP 개발 계획 및 Phase Z 시뮬레이션 구현 로드맵입니다.

## 📅 로드맵

### Phase 1: 동적 분석 시뮬레이션 (완료)
- [x] MDX 파일 텍스트 분석 로직 구현 (`STAGE 1`)
- [x] 섹션 개수에 따른 자동 레이아웃 및 존 매핑 로직 구현 (`STAGE 2`)
- [x] 분석 결과에 따른 캔버스 동적 렌더링 연결

### Phase 2: 사용자 인터랙션 강화 (진행 중)
- [ ] 레이아웃 프리셋 변경 시 캔버스 즉시 갱신
- [ ] 프레임 선택 시 캔버스 내 카드 스타일 변경 시뮬레이션
- [ ] Zone/Region 선택 상태에 따른 시각적 피드백 정교화

### Phase 3: 콘텐츠 상세화 및 팝업 시뮬레이션
- [ ] MDX 원문 무손실 보존을 위한 팝업 UI 구현
- [ ] `display_strategy` (Preview vs Full) 시뮬레이션 로직 추가
- [ ] 최종 결과물 데이터 구조(JSON) 내보내기 기능

## 📐 핵심 설계 원칙 (Phase Z 준수)

1. **Deterministic Mapping:** 동일한 MDX 입력에 대해 항상 동일한 초기 레이아웃과 프레임이 제안되어야 함.
2. **User Override Priority:** 사용자의 수동 선택은 시스템 추천보다 우선하며, 명시적으로 `overrides` 객체에 저장됨.
3. **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` 버튼 핸들러