block types: 구분선/리스트 블록 스토어 및 유닛 테스트 추가

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(실패 테스트 → 구현 → 리팩터링) 순서를 유지한다.

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();

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();