video 블록 및 리펙터링

2025-11-27 10:07:59 +09:00
parent 672cca5271
commit 48e13d2a75
223 changed files with 8979 additions and 2125 deletions
@@ -0,0 +1,120 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
+import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+
+// PublicPageRenderer 섹션/루트 레이아웃 TDD
+// - Export 레이어의 pb-root / pb-section-* 구조와 개념적으로 대응되는 프리뷰 레이아웃을 고정한다.
+// - 정확한 px 값 비교 대신, 주요 Tailwind 레이아웃 클래스 존재 여부를 검증한다.
+
+describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const makeSectionWithText = (sectionOverride: Partial<SectionBlockProps> = {}, textOverride: Partial<TextBlockProps> = {}): Block[] => {
+    const sectionProps: SectionBlockProps = {
+      background: "default",
+      paddingY: "md",
+      columns: [{ id: "sec_layout_col_1", span: 12 }],
+      maxWidthMode: "normal",
+      gapX: "md",
+      alignItems: "top",
+      ...sectionOverride,
+    } as SectionBlockProps;
+
+    const textProps: TextBlockProps = {
+      text: "섹션 레이아웃 텍스트",
+      align: "left",
+      size: "base",
+      ...textOverride,
+    } as TextBlockProps;
+
+    const section: Block = {
+      id: "sec_layout_1",
+      type: "section",
+      props: sectionProps,
+    } as any;
+
+    const text: Block = {
+      id: "sec_layout_1_text",
+      type: "text",
+      sectionId: "sec_layout_1",
+      columnId: "sec_layout_col_1",
+      props: textProps,
+    } as any;
+
+    return [section, text];
+  };
+
+  it("섹션 레이아웃은 mx-auto / max-w / px-* 및 flex 컬럼/갭 구조로 렌더되어야 한다", () => {
+    const blocks: Block[] = makeSectionWithText();
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const inner = screen.getByTestId("preview-section-inner") as HTMLDivElement;
+    const columns = screen.getByTestId("preview-section-columns") as HTMLDivElement;
+
+    // Export 의 pb-section-inner / pb-section-columns 에 대응되는 레이아웃 구조를 최소한으로 보장한다.
+    expect(inner.className).toContain("mx-auto");
+    expect(inner.className).toContain("px-4");
+    expect(inner.className).toMatch(/max-w-/);
+
+    expect(columns.className).toContain("flex");
+    // gapX 기본값(md)에 대해 gap-8 이 사용되는 현재 구현을 고정한다.
+    expect(columns.className).toContain("gap-8");
+
+    // 컬럼 래퍼는 flex-col 과 일정한 세로 간격을 가진다.
+    const columnWrapper = columns.querySelector("div.flex.flex-col") as HTMLDivElement | null;
+    expect(columnWrapper).not.toBeNull();
+    if (columnWrapper) {
+      expect(columnWrapper.className).toContain("gap-4");
+    }
+
+    // 섹션 텍스트가 실제로 섹션 안에 렌더되는지 확인한다.
+    const textEl = screen.getByText("섹션 레이아웃 텍스트");
+    const section = textEl.closest("section");
+    expect(section).not.toBeNull();
+  });
+
+  it("루트 블록은 상단 섹션 내 max-width 컨테이너 안에서 렌더되어야 한다", () => {
+    const rootTextProps: TextBlockProps = {
+      text: "루트 레이아웃 텍스트",
+      align: "left",
+      size: "base",
+    } as TextBlockProps;
+
+    const rootTextBlock: Block = {
+      id: "root_layout_text",
+      type: "text",
+      props: rootTextProps,
+    } as any;
+
+    const sectionBlocks = makeSectionWithText();
+
+    const blocks: Block[] = [rootTextBlock, ...sectionBlocks];
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const rootTextEl = screen.getByText("루트 레이아웃 텍스트") as HTMLParagraphElement;
+
+    // 루트 텍스트는 상단 섹션(py-12) 안에 존재해야 한다.
+    const rootSection = rootTextEl.closest("section");
+    expect(rootSection).not.toBeNull();
+    if (!rootSection) return;
+
+    expect(rootSection.className).toContain("py-12");
+
+    // 섹션 바로 아래의 max-width 컨테이너 구조를 확인한다.
+    const innerContainer = rootSection.querySelector("div");
+    expect(innerContainer).not.toBeNull();
+    if (!innerContainer) return;
+
+    const className = innerContainer.className;
+    expect(className).toContain("mx-auto");
+    expect(className).toContain("max-w-3xl");
+    expect(className).toContain("px-4");
+    expect(className).toContain("flex");
+    expect(className).toContain("gap-4");
+  });
+});