1차 싱크 완료

tests/unit/EditorSectionLayout.spec.tsx

@@ -0,0 +1,201 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import EditorPage from "@/app/editor/page";
+import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
+
+let mockState: any;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "섹션 레이아웃 테스트",
+    slug: "section-layout-test",
+    canvasPreset: "full",
+    canvasWidthPx: 1024,
+    canvasBgColorHex: "#0f172a",
+    bodyBgColorHex: "#020617",
+  } as ProjectConfig;
+
+  mockState = {
+    blocks: [] as Block[],
+    projectConfig: baseProjectConfig,
+    selectedBlockId: null as string | null,
+    selectedListItemId: null as string | null,
+    // 에디터 액션들은 모두 더미 함수로 채워 EditorPage 렌더링이 가능하도록 한다.
+    undo: vi.fn(),
+    redo: vi.fn(),
+    removeBlock: vi.fn(),
+    duplicateBlock: vi.fn(),
+    selectBlock: vi.fn(),
+    selectListItem: vi.fn(),
+    addTextBlock: vi.fn(),
+    addButtonBlock: vi.fn(),
+    addImageBlock: vi.fn(),
+    addDividerBlock: vi.fn(),
+    addListBlock: vi.fn(),
+    addSectionBlock: vi.fn(),
+    addFormBlock: vi.fn(),
+    addFormInputBlock: vi.fn(),
+    addFormSelectBlock: vi.fn(),
+    addFormCheckboxBlock: vi.fn(),
+    addFormRadioBlock: vi.fn(),
+    addHeroTemplateSection: vi.fn(),
+    addFeaturesTemplateSection: vi.fn(),
+    addCtaTemplateSection: vi.fn(),
+    addFaqTemplateSection: vi.fn(),
+    addPricingTemplateSection: vi.fn(),
+    addTestimonialsTemplateSection: vi.fn(),
+    addBlogTemplateSection: vi.fn(),
+    addTeamTemplateSection: vi.fn(),
+    addFooterTemplateSection: vi.fn(),
+    updateBlock: vi.fn(),
+    replaceBlocks: vi.fn(),
+    reorderBlocks: vi.fn(),
+    moveBlock: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  (useEditorStore as any).getState = () => mockState;
+
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+describe("EditorPage - 섹션 레이아웃 속성", () => {
+  it("backgroundColorCustom / paddingYPx / maxWidthPx / gapXPx 가 editor-section 스타일에 반영되어야 한다", () => {
+    const section: Block = {
+      id: "sec_layout",
+      type: "section",
+      props: {
+        background: "default",
+        paddingY: "md",
+        columns: [
+          { id: "sec_layout_col_1", span: 12 },
+        ],
+        maxWidthMode: "normal",
+        gapX: "md",
+        alignItems: "top",
+        backgroundColorCustom: "#123456",
+        paddingYPx: 80,
+        maxWidthPx: 960,
+        gapXPx: 32,
+      },
+    } as any;
+
+    const child: Block = {
+      id: "txt_1",
+      type: "text",
+      props: {
+        text: "섹션 안 텍스트",
+        align: "left",
+        size: "base",
+      },
+      sectionId: "sec_layout",
+      columnId: "sec_layout_col_1",
+    } as any;
+
+    mockState.blocks = [section, child];
+    mockState.selectedBlockId = "sec_layout";
+
+    render(<EditorPage />);
+
+    const sectionEl = screen.getByTestId("editor-section") as HTMLElement;
+    // 배경색: #123456 → rgb(18, 52, 86)
+    expect(sectionEl.style.backgroundColor).toBe("rgb(18, 52, 86)");
+    // 세로 패딩(px)이 스타일에 반영되어야 한다.
+    expect(sectionEl.style.paddingTop).toBe("80px");
+    expect(sectionEl.style.paddingBottom).toBe("80px");
+
+    // 내부 maxWidth
+    const inner = sectionEl.querySelector("div.mx-auto") as HTMLElement;
+    expect(inner).toBeTruthy();
+    expect(inner.style.maxWidth).toBe("960px");
+
+    // 컬럼 간 간격(gapXPx)
+    const columns = sectionEl.querySelector("div.flex") as HTMLElement;
+    expect(columns).toBeTruthy();
+    expect(columns.style.columnGap).toBe("32px");
+  });
+
+  it("alignItems 값에 따라 섹션 컬럼 컨테이너가 items-*- 정렬 클래스를 가져야 한다", () => {
+    const section: Block = {
+      id: "sec_align",
+      type: "section",
+      props: {
+        background: "default",
+        paddingY: "md",
+        columns: [
+          { id: "sec_align_col_1", span: 12 },
+        ],
+        maxWidthMode: "normal",
+        gapX: "md",
+        alignItems: "center",
+      },
+    } as any;
+
+    const child: Block = {
+      id: "txt_align",
+      type: "text",
+      props: {
+        text: "세로 정렬 테스트",
+        align: "left",
+        size: "base",
+      },
+      sectionId: "sec_align",
+      columnId: "sec_align_col_1",
+    } as any;
+
+    mockState.blocks = [section, child];
+    mockState.selectedBlockId = "sec_align";
+
+    render(<EditorPage />);
+
+    const sectionEl = screen.getByTestId("editor-section") as HTMLElement;
+    const columns = sectionEl.querySelector("div.flex") as HTMLElement;
+    expect(columns).toBeTruthy();
+    // alignItems="center" 인 경우 items-center 클래스가 포함되어야 한다.
+    expect(columns.className).toContain("items-center");
+  });
+
+  it("Hero 템플릿 섹션의 레이아웃 속성이 EditorPage 섹션 렌더에 반영되어야 한다", () => {
+    const sectionId = "hero_section_layout";
+    const createId = (() => {
+      let i = 0;
+      return () => `hero_${++i}`;
+    })();
+
+    const { blocks } = createHeroTemplateBlocks({ sectionId, createId });
+
+    mockState.blocks = blocks as Block[];
+    mockState.selectedBlockId = sectionId;
+
+    render(<EditorPage />);
+
+    const sectionEl = screen.getByTestId("editor-section") as HTMLElement;
+    // Hero 템플릿 배경색(#020617)과 패딩, 최대 폭, gap 이 에디터 섹션에도 반영되어야 한다.
+    expect(sectionEl.style.backgroundColor).toBe("rgb(2, 6, 23)");
+    expect(sectionEl.style.paddingTop).toBe("96px");
+    expect(sectionEl.style.paddingBottom).toBe("96px");
+
+    const inner = sectionEl.querySelector("div.mx-auto") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("960px");
+
+    const columns = sectionEl.querySelector("div.flex") as HTMLElement;
+    expect(columns.style.columnGap).toBe("40px");
+  });
+});