1차 싱크 완료

tests/unit/PublicPageRendererBackground.spec.tsx

@@ -0,0 +1,55 @@
+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
+// - 루트 컨테이너는 레이아웃/텍스트 색상만 담당하고, 고정 배경색(bg-slate-950)은 사용하지 않아야 한다.
+
+describe("PublicPageRenderer - 배경색 위임", () => {
+  it("루트 컨테이너는 bg-slate-950 같은 고정 배경 클래스 없이 렌더링되어야 한다", () => {
+    const blocks: Block[] = [];
+
+    const { container } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const root = container.firstElementChild as HTMLElement | null;
+    expect(root).not.toBeNull();
+
+    const className = root!.getAttribute("class") ?? "";
+
+    expect(className).not.toContain("bg-slate-950");
+  });
+
+  it("루트 텍스트/버튼 블록 영역은 고정 bg-slate-950 배경 대신 캔버스 배경을 그대로 보여야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "text_root",
+        type: "text",
+        props: {
+          text: "텍스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+      {
+        id: "button_root",
+        type: "button",
+        props: {
+          label: "버튼",
+          href: "#",
+          align: "left",
+        },
+      } as any,
+    ];
+
+    const { container } = render(<PublicPageRenderer blocks={blocks} />);
+
+    // 섹션 블록이 하나도 없으므로, 첫 번째 <section> 은 루트 텍스트/버튼 블록을 감싸는 래퍼다.
+    const firstSection = container.querySelector("section");
+    expect(firstSection).not.toBeNull();
+
+    const className = firstSection!.getAttribute("class") ?? "";
+
+    expect(className).not.toContain("bg-slate-950");
+  });
+});