video 블록 및 리펙터링

tests/unit/PublicPageRenderer.image.spec.tsx

@@ -0,0 +1,57 @@
+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 } from "@/features/editor/state/editorStore";
+
+// PublicPageRenderer 이미지 블록 TDD
+// - src 가 비어 있을 때는 <img> 를 렌더하지 않아 Next.js 경고를 피한다.
+// - src 가 비어 있지 않을 때는 정상적으로 <img> 를 렌더한다.
+
+describe("PublicPageRenderer - image block", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("src 가 비어 있으면 img 요소를 렌더하지 않아야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "img_empty",
+        type: "image",
+        props: {
+          src: "",
+          alt: "빈 이미지",
+          align: "center",
+          widthMode: "auto",
+          borderRadius: "md",
+        },
+      } as any,
+    ];
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const img = screen.queryByRole("img", { name: "빈 이미지" });
+    expect(img).toBeNull();
+  });
+
+  it("src 가 비어 있지 않으면 img 요소를 렌더해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "img_non_empty",
+        type: "image",
+        props: {
+          src: "https://example.com/test.png",
+          alt: "정상 이미지",
+          align: "center",
+          widthMode: "auto",
+          borderRadius: "md",
+        },
+      } as any,
+    ];
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const img = screen.getByRole("img", { name: "정상 이미지" }) as HTMLImageElement;
+    expect(img).toBeTruthy();
+    expect(img.src).toContain("https://example.com/test.png");
+  });
+});