diff --git a/MAIN_PLAN.md b/MAIN_PLAN.md new file mode 100644 index 0000000..a55db58 --- /dev/null +++ b/MAIN_PLAN.md @@ -0,0 +1,74 @@ +# 메인 플랜 (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 없이 테스트 통과 + +## 다음 단계 개요 +1. **builder-10-block-types** + - 더 다양한 블록 타입 추가 (예: 이미지, 아이콘이 있는 카드, 구분선, 리스트 등) + - Zustand store에 타입/props 정의 및 액션 추가 + - 에디터 UI에 새 블록 버튼 및 속성 패널 연동 + - 새 블록 타입에 대한 유닛 테스트 + E2E 테스트 추가 + +2. **builder-11-editor-ux-advanced** + - 드래그앤드롭 UX 고도화 (섹션/컬럼 이동 UX 개선, 드롭 힌트 강화) + - 키보드 숏컷 확장 및 포커스 관리 개선 + - 인라인 편집 UX 다듬기 + +3. **builder-12-theme-output** + - Tailwind 기반 디자인 시스템 정리 (색상/타이포/간격 스케일) + - Public/Preview 렌더링 품질 개선 (반응형, 여백, 타이포그래피) + - 샘플 테마 프리셋 추가 + +--- + +## builder-10-block-types 상세 플랜 + +### 1) 대상 블록 타입 정의 +- **이미지 블록(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를 진행하면서 우선순위 높은 것부터 차례대로 확장한다. + +### 2) TDD 순서 +1. **유닛 테스트부터 작성 (실패 상태로 시작)** + - `tests/unit/editorStore.spec.ts` + - `addImageBlock`, `addDividerBlock`, `addListBlock` 등 새 액션 테스트 추가 + - 블록이 올바른 기본 props 와 함께 `blocks` 배열에 추가되는지 확인 + - 섹션/컬럼 내부에 배치되는 경우 위치 정보(`sectionId`, `columnId`) 테스트 +2. **스토어 구현 (editorStore.ts)** + - `Block` 타입에 새 `type` 과 `props` 구조 추가 + - `EditorState`에 새 액션 시그니처 추가 + - `createEditorState` 내부에 실제 로직 구현 (createId 활용, 기존 텍스트/버튼/섹션 패턴 재사용) +3. **에디터 UI 연동 (editor/page.tsx)** + - 사이드바에 새 블록 버튼 추가 (이미지, 구분선, 리스트 등) + - 캔버스 렌더링 분기에 새 블록 타입별 렌더링 로직 추가 + - 속성 패널에서 최소한의 필수 props 편집 가능하도록 구현 +4. **E2E 테스트 추가 (Playwright)** + - `tests/e2e/editor.spec.ts` + - 새 블록 타입 버튼 클릭 → 캔버스에 올바르게 렌더링되는지 확인 + - 속성 패널에서 값 수정 시 캔버스 반영 확인 (예: 이미지 src, 리스트 아이템 수정) +5. **리팩터링 & 안정화** + - 중복되는 렌더링/props 처리 로직 정리 + - 필요시 추가 유닛 테스트/E2E로 회귀 방지 + +--- + +## 디버깅/CI 관련 기록 (요약) +- 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(실패 테스트 → 구현 → 리팩터링) 순서를 유지한다. diff --git a/src/features/editor/state/editorStore.ts b/src/features/editor/state/editorStore.ts index 5677432..0694114 100644 --- a/src/features/editor/state/editorStore.ts +++ b/src/features/editor/state/editorStore.ts @@ -1,8 +1,8 @@ import { createStore } from "zustand"; import { create } from "zustand"; -// 블록 타입 정의: 텍스트/버튼/이미지/섹션 블록 -export type BlockType = "text" | "button" | "image" | "section"; +// 블록 타입 정의: 텍스트/버튼/이미지/섹션/구분선/리스트 블록 +export type BlockType = "text" | "button" | "image" | "section" | "divider" | "list"; // 텍스트 블록 속성 export interface TextBlockProps { @@ -26,6 +26,19 @@ export interface ImageBlockProps { alt: string; } +// 구분선 블록 속성 +export interface DividerBlockProps { + align: "left" | "center" | "right"; + thickness: "thin" | "medium"; +} + +// 리스트 블록 속성 +export interface ListBlockProps { + items: string[]; + ordered: boolean; + align: "left" | "center" | "right"; +} + // 섹션 블록 속성 export interface SectionBlockProps { background: "default" | "muted" | "primary"; @@ -41,7 +54,13 @@ export interface SectionBlockProps { export interface Block { id: string; type: BlockType; - props: TextBlockProps | ButtonBlockProps | ImageBlockProps | SectionBlockProps; + props: + | TextBlockProps + | ButtonBlockProps + | ImageBlockProps + | SectionBlockProps + | DividerBlockProps + | ListBlockProps; // 레이아웃 트리 상 위치 정보 (루트 텍스트/버튼/이미지 블록은 null) sectionId?: string | null; columnId?: string | null; @@ -56,6 +75,8 @@ export interface EditorState { addTextBlock: () => void; addButtonBlock: () => void; addImageBlock: () => void; + addDividerBlock: () => void; + addListBlock: () => void; addSectionBlock: () => void; addHeroTemplateSection: () => void; addFeaturesTemplateSection: () => void; @@ -814,6 +835,85 @@ const createEditorState = (set: any, get: any): EditorState => ({ })); }, + // 구분선 블록 추가: 기본 정렬/두께와 함께 생성 후 선택 상태로 만든다 + addDividerBlock: () => { + const id = createId(); + + const { selectedBlockId, blocks } = get(); + let sectionId: string | null = null; + let columnId: string | null = null; + + if (selectedBlockId) { + const target = blocks.find((b: Block) => b.id === selectedBlockId); + if (target) { + if (target.type === "section") { + const sProps = target.props as SectionBlockProps; + sectionId = target.id; + columnId = sProps.columns?.[0]?.id ?? null; + } else { + sectionId = (target as any).sectionId ?? null; + columnId = (target as any).columnId ?? null; + } + } + } + + const newBlock: Block = { + id, + type: "divider", + props: { + align: "center", + thickness: "thin", + }, + sectionId, + columnId, + }; + + set((state: EditorState) => ({ + blocks: [...state.blocks, newBlock], + selectedBlockId: id, + })); + }, + + // 리스트 블록 추가: 기본 항목/정렬과 함께 생성 후 선택 상태로 만든다 + addListBlock: () => { + const id = createId(); + + const { selectedBlockId, blocks } = get(); + let sectionId: string | null = null; + let columnId: string | null = null; + + if (selectedBlockId) { + const target = blocks.find((b: Block) => b.id === selectedBlockId); + if (target) { + if (target.type === "section") { + const sProps = target.props as SectionBlockProps; + sectionId = target.id; + columnId = sProps.columns?.[0]?.id ?? null; + } else { + sectionId = (target as any).sectionId ?? null; + columnId = (target as any).columnId ?? null; + } + } + } + + const newBlock: Block = { + id, + type: "list", + props: { + items: ["리스트 아이템 1"], + ordered: false, + align: "left", + }, + sectionId, + columnId, + }; + + set((state: EditorState) => ({ + blocks: [...state.blocks, newBlock], + selectedBlockId: id, + })); + }, + // 섹션 블록 추가: 배경/패딩 기본값과 함께 생성 후 선택 상태로 만든다 addSectionBlock: () => { const id = createId(); diff --git a/tests/unit/editorStore.spec.ts b/tests/unit/editorStore.spec.ts index 4af9e3f..1424b8b 100644 --- a/tests/unit/editorStore.spec.ts +++ b/tests/unit/editorStore.spec.ts @@ -3,6 +3,9 @@ import { createEditorStore, type TextBlockProps, type ButtonBlockProps, + type ImageBlockProps, + type DividerBlockProps, + type ListBlockProps, } from "@/features/editor/state/editorStore"; // 에디터 상태 스토어에 대한 첫 TDD: 텍스트 블록 추가 @@ -22,6 +25,48 @@ describe("editorStore", () => { expect(selectedBlockId).toBe(blocks[0].id); }); + it("구분선 블록을 추가하면 기본 align/thickness 와 함께 추가되고 선택되어야 한다", () => { + const store = createEditorStore(); + + store.getState().addDividerBlock(); + + const { blocks, selectedBlockId } = store.getState(); + + expect(blocks).toHaveLength(1); + expect(blocks[0].type).toBe("divider"); + + const dividerProps = blocks[0].props as DividerBlockProps; + expect(dividerProps.align).toBe("center"); + expect(dividerProps.thickness).toBe("thin"); + + expect((blocks[0] as any).sectionId).toBeNull(); + expect((blocks[0] as any).columnId).toBeNull(); + + expect(selectedBlockId).toBe(blocks[0].id); + }); + + it("리스트 블록을 추가하면 기본 items/ordered/align 과 함께 추가되고 선택되어야 한다", () => { + const store = createEditorStore(); + + store.getState().addListBlock(); + + const { blocks, selectedBlockId } = store.getState(); + + expect(blocks).toHaveLength(1); + expect(blocks[0].type).toBe("list"); + + const listProps = blocks[0].props as ListBlockProps; + expect(Array.isArray(listProps.items)).toBe(true); + expect(listProps.items.length).toBeGreaterThanOrEqual(1); + expect(listProps.ordered).toBe(false); + expect(listProps.align).toBe("left"); + + expect((blocks[0] as any).sectionId).toBeNull(); + expect((blocks[0] as any).columnId).toBeNull(); + + expect(selectedBlockId).toBe(blocks[0].id); + }); + it("reorderBlocks 호출 시 블록 배열 순서가 변경되어야 한다", () => { const store = createEditorStore(); @@ -78,6 +123,27 @@ describe("editorStore", () => { expect(selectedBlockId).toBe(updatedBlocks[0].id); }); + it("이미지 블록을 추가하면 기본 src/alt와 함께 추가되고 선택되어야 한다", () => { + const store = createEditorStore(); + + store.getState().addImageBlock(); + + const { blocks, selectedBlockId } = store.getState(); + + expect(blocks).toHaveLength(1); + expect(blocks[0].type).toBe("image"); + + const imageProps = blocks[0].props as ImageBlockProps; + expect(imageProps.src).toBe(""); + expect(imageProps.alt).toBe("이미지 설명"); + + // 루트에서 추가한 경우에는 sectionId/columnId 가 null 이어야 한다. + expect((blocks[0] as any).sectionId).toBeNull(); + expect((blocks[0] as any).columnId).toBeNull(); + + expect(selectedBlockId).toBe(blocks[0].id); + }); + it("섹션이 선택된 상태에서 텍스트 블록을 추가하면 해당 섹션의 첫 컬럼에 배치되어야 한다", () => { const store = createEditorStore();