메인 플랜 (Page Builder)

현재 완료된 단계

builder-1 ~ builder-8: 기본 에디터, 텍스트/버튼/섹션 블록, DnD, Undo/Redo, 블록 삭제/복제 등 핵심 UX 구현
builder-9-templates-advanced (현재 브랜치):
- Hero / Features / CTA / FAQ / Pricing / Testimonials / Blog / Team / Footer 템플릿 섹션
- 프리뷰 페이지 및 모바일 뷰포트 E2E
- CI 환경에서 Prisma Client generate + API 테스트용 DATABASE_URL 설정
- API 테스트에서 Prisma를 메모리 기반 목으로 교체하여 DB 없이 테스트 통과

builder-10-block-types
- 더 다양한 블록 타입 추가 (예: 이미지, 아이콘이 있는 카드, 구분선, 리스트 등)
- Zustand store에 타입/props 정의 및 액션 추가
- 에디터 UI에 새 블록 버튼 및 속성 패널 연동
- 새 블록 타입에 대한 유닛 테스트 + E2E 테스트 추가
builder-11-editor-ux-advanced
- 드래그앤드롭 UX 고도화 (섹션/컬럼 이동 UX 개선, 드롭 힌트 강화)
- 키보드 숏컷 확장 및 포커스 관리 개선
- 인라인 편집 UX 다듬기
builder-12-theme-output
- Tailwind 기반 디자인 시스템 정리 (색상/타이포/간격 스케일)
- Public/Preview 렌더링 품질 개선 (반응형, 여백, 타이포그래피)
- 샘플 테마 프리셋 추가

이미지 블록(image)
- props: src, alt, align, width, borderRadius 등
구분선(divider)
- props: style (solid/dashed), thickness, color, marginY
리스트(list)
- props: items (문자열 배열), ordered (true/false), align
(필요시) 카드(card)
- props: title, description, imageSrc, align

※ 실제 구현 범위는 TDD를 진행하면서 우선순위 높은 것부터 차례대로 확장한다.

유닛 테스트부터 작성 (실패 상태로 시작)
- tests/unit/editorStore.spec.ts
  - addImageBlock, addDividerBlock, addListBlock 등 새 액션 테스트 추가
  - 블록이 올바른 기본 props 와 함께 blocks 배열에 추가되는지 확인
  - 섹션/컬럼 내부에 배치되는 경우 위치 정보(sectionId, columnId) 테스트
스토어 구현 (editorStore.ts)
- Block 타입에 새 type 과 props 구조 추가
- EditorState에 새 액션 시그니처 추가
- createEditorState 내부에 실제 로직 구현 (createId 활용, 기존 텍스트/버튼/섹션 패턴 재사용)
에디터 UI 연동 (editor/page.tsx)
- 사이드바에 새 블록 버튼 추가 (이미지, 구분선, 리스트 등)
- 캔버스 렌더링 분기에 새 블록 타입별 렌더링 로직 추가
- 속성 패널에서 최소한의 필수 props 편집 가능하도록 구현
E2E 테스트 추가 (Playwright)
- tests/e2e/editor.spec.ts
  - 새 블록 타입 버튼 클릭 → 캔버스에 올바르게 렌더링되는지 확인
  - 속성 패널에서 값 수정 시 캔버스 반영 확인 (예: 이미지 src, 리스트 아이템 수정)
리팩터링 & 안정화
- 중복되는 렌더링/props 처리 로직 정리
- 필요시 추가 유닛 테스트/E2E로 회귀 방지

CI에서 prisma generate 단계가 DATABASE_URL 없음으로 실패 → 워크플로에서 더미 DATABASE_URL 주입으로 해결
유닛 테스트에서 API 테스트가 실제 DB 접속 시도 →
- CI: Run unit tests 스텝에도 더미 DATABASE_URL 추가
- 테스트 코드: PrismaClient를 메모리 기반 목으로 교체, 라우트를 동적 import 하도록 수정

이후 단계(builder-11-editor-ux-advanced, builder-12-theme-output)에서도 모든 기능 추가는 TDD(실패 테스트 → 구현 → 리팩터링) 순서를 유지한다.