video 블록 및 리펙터링

tests/unit/PublicPageRendererTextStyles.spec.tsx

@@ -0,0 +1,64 @@
+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, TextBlockProps } from "@/features/editor/state/editorStore";
+
+// PublicPageRenderer 텍스트 블록 스타일 TDD
+// - computeTextPublicTokens 결과가 실제 프리뷰 렌더링에 올바르게 반영되는지 검증한다.
+
+describe("PublicPageRenderer - 텍스트 블록 스타일", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const makeTextBlock = (override: Partial<TextBlockProps> = {}): Block => {
+    const base: TextBlockProps = {
+      text: "퍼블릭 텍스트 스타일 테스트",
+      align: "left",
+      size: "base",
+    } as TextBlockProps;
+
+    return {
+      id: "text_1",
+      type: "text",
+      props: { ...base, ...override },
+    } as any;
+  };
+
+  it("기본 텍스트 블록은 text-left / text-base 및 기본 색상으로 렌더되어야 한다", () => {
+    const blocks: Block[] = [makeTextBlock()];
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
+
+    expect(el.className).toContain("text-left");
+    expect(el.className).toContain("text-base");
+    // 기본 색상은 Tailwind text-slate-50 클래스로 고정되어 있다.
+    expect(el.className).toContain("text-slate-50");
+  });
+
+  it("fontSizeMode=custom, fontSizeCustom, colorCustom, backgroundColorCustom 이 설정되면 스타일이 인라인으로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      makeTextBlock({
+        align: "center",
+        fontSizeMode: "custom",
+        fontSizeCustom: "24px",
+        colorCustom: "#ff0000",
+        backgroundColorCustom: "#123456",
+      }),
+    ];
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
+
+    // 정렬 클래스
+    expect(el.className).toContain("text-center");
+    // 커스텀 폰트 크기: sizeClass 는 비워지고, 인라인 스타일로 설정된다.
+    expect(el.style.fontSize).toBe("24px");
+    // 커스텀 색상/배경색
+    expect(el.style.color).toBe("rgb(255, 0, 0)");
+    expect(el.style.backgroundColor).toBe("rgb(18, 52, 86)");
+  });
+});