1차 싱크 완료

2025-11-24 21:32:37 +09:00
parent 7a8ad7c057
commit 672cca5271
83 changed files with 6681 additions and 325 deletions
@@ -0,0 +1,192 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
+import type { Block } from "@/features/editor/state/editorStore";
+
+// 블록 배경색 확장 TDD
+// - backgroundColorCustom 이 설정된 경우에만 프리뷰에서 배경색이 적용되어야 한다.
+// - 설정되지 않은 경우에는 기본 배경(투명)으로 남아야 한다.
+
+describe("PublicPageRenderer - 블록 배경색", () => {
+  it("text 블록은 backgroundColorCustom 이 설정된 경우에만 배경색 스타일을 가져야 한다", () => {
+    const blocksWithBg: Block[] = [
+      {
+        id: "text_with_bg",
+        type: "text",
+        props: {
+          text: "배경 있는 텍스트",
+          align: "left",
+          size: "base",
+          // TDD: 새 배경색 속성
+          backgroundColorCustom: "#123456",
+        },
+      } as any,
+    ];
+
+    const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
+
+    const pWithBg = container.querySelector("p") as HTMLElement | null;
+    expect(pWithBg).not.toBeNull();
+    // JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
+    expect(pWithBg!.style.backgroundColor).toBe("rgb(18, 52, 86)");
+
+    const blocksWithoutBg: Block[] = [
+      {
+        id: "text_no_bg",
+        type: "text",
+        props: {
+          text: "배경 없는 텍스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
+
+    const pNoBg = container.querySelector("p") as HTMLElement | null;
+    expect(pNoBg).not.toBeNull();
+    // 기본값은 inline style 이 설정되지 않은 상태여야 한다.
+    expect(pNoBg!.style.backgroundColor === "" || pNoBg!.style.backgroundColor === "transparent").toBe(true);
+  });
+
+  it("list 블록은 backgroundColorCustom 이 설정된 경우에만 리스트 컨테이너에 배경색이 적용되어야 한다", () => {
+    const blocksWithBg: Block[] = [
+      {
+        id: "list_with_bg",
+        type: "list",
+        props: {
+          items: ["아이템 1"],
+          ordered: false,
+          // TDD: 새 배경색 속성
+          backgroundColorCustom: "#00ff88",
+        },
+      } as any,
+    ];
+
+    const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
+
+    const listWithBg = (container.querySelector("ul,ol") as HTMLElement | null);
+    expect(listWithBg).not.toBeNull();
+    expect(listWithBg!.style.backgroundColor).toBe("rgb(0, 255, 136)");
+
+    const blocksWithoutBg: Block[] = [
+      {
+        id: "list_no_bg",
+        type: "list",
+        props: {
+          items: ["아이템 1"],
+          ordered: false,
+        },
+      } as any,
+    ];
+
+    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
+
+    const listNoBg = (container.querySelector("ul,ol") as HTMLElement | null);
+    expect(listNoBg).not.toBeNull();
+    expect(listNoBg!.style.backgroundColor === "" || listNoBg!.style.backgroundColor === "transparent").toBe(true);
+  });
+
+  it("form 컨트롤러 블록은 backgroundColorCustom 이 설정된 경우에만 폼 래퍼에 배경색이 적용되어야 한다", () => {
+    const blocksWithBg: Block[] = [
+      {
+        id: "form_with_bg",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fields: [],
+          fieldIds: [],
+          formWidthMode: "auto",
+          // TDD: 새 배경색 속성
+          backgroundColorCustom: "#111111",
+        },
+      } as any,
+    ];
+
+    const { getByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
+
+    const formWithBg = getByTestId("preview-form-controller") as HTMLFormElement;
+    expect(formWithBg.style.backgroundColor).toBe("rgb(17, 17, 17)");
+
+    const blocksWithoutBg: Block[] = [
+      {
+        id: "form_no_bg",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fields: [],
+          fieldIds: [],
+          formWidthMode: "auto",
+        },
+      } as any,
+    ];
+
+    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
+
+    const formNoBg = getByTestId("preview-form-controller") as HTMLFormElement;
+    expect(formNoBg.style.backgroundColor === "" || formNoBg.style.backgroundColor === "transparent").toBe(true);
+  });
+
+  it("section 블록은 backgroundColorCustom 이 설정된 경우에만 섹션 요소에 배경색이 적용되어야 한다", () => {
+    const blocksWithBg: Block[] = [
+      {
+        id: "sec_1",
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [{ id: "sec_1_col_1", span: 12 }],
+          backgroundColorCustom: "#123456",
+        },
+      } as any,
+      {
+        id: "sec_1_text",
+        type: "text",
+        sectionId: "sec_1",
+        columnId: "sec_1_col_1",
+        props: {
+          text: "섹션 안 텍스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const { getByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
+
+    const sectionWithBg = getByTestId("preview-section") as HTMLElement;
+    // JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
+    expect(sectionWithBg.style.backgroundColor).toBe("rgb(18, 52, 86)");
+
+    const blocksWithoutBg: Block[] = [
+      {
+        id: "sec_1",
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [{ id: "sec_1_col_1", span: 12 }],
+        },
+      } as any,
+      {
+        id: "sec_1_text",
+        type: "text",
+        sectionId: "sec_1",
+        columnId: "sec_1_col_1",
+        props: {
+          text: "섹션 안 텍스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
+
+    const sectionNoBg = getByTestId("preview-section") as HTMLElement;
+    expect(sectionNoBg.style.backgroundColor === "" || sectionNoBg.style.backgroundColor === "transparent").toBe(true);
+  });
+});