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,125 @@
+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";
+
+// PublicPageRenderer 섹션 배경 이미지 TDD
+// - SectionBlockProps 의 backgroundImage* 속성이 섹션 wrapper 스타일에 반영되는지 검증한다.
+
+describe("PublicPageRenderer - 섹션 배경 이미지", () => {
+  it("backgroundImageSrc/size/position 이 설정된 섹션은 backgroundImage/backgroundSize/backgroundPosition 스타일을 가져야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "sec_bg_image",
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [{ id: "sec_bg_image_col_1", span: 12 }],
+          backgroundImageSrc: "/images/section-bg.png",
+          backgroundImageSize: "cover",
+          backgroundImagePosition: "top",
+          backgroundImageRepeat: "repeat-y",
+        },
+      } as any,
+      {
+        id: "sec_bg_text",
+        type: "text",
+        sectionId: "sec_bg_image",
+        columnId: "sec_bg_image_col_1",
+        props: {
+          text: "섹션 배경 이미지 테스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const sectionEl = getByTestId("preview-section") as HTMLElement;
+    expect(sectionEl.style.backgroundImage).toContain("/images/section-bg.png");
+    expect(sectionEl.style.backgroundSize).toBe("cover");
+    expect(sectionEl.style.backgroundPosition).toBe("center top");
+    expect(sectionEl.style.backgroundRepeat).toBe("repeat-y");
+  });
+
+  it("backgroundImagePositionMode 가 custom 인 섹션은 background-position 에 'X% Y%' 값이 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "sec_bg_image_xy",
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [{ id: "sec_bg_image_xy_col_1", span: 12 }],
+          backgroundImageSrc: "/images/section-bg-xy.png",
+          backgroundImageSize: "contain",
+          backgroundImagePositionMode: "custom",
+          backgroundImagePositionXPercent: 25,
+          backgroundImagePositionYPercent: 80,
+        },
+      } as any,
+      {
+        id: "sec_bg_text_xy",
+        type: "text",
+        sectionId: "sec_bg_image_xy",
+        columnId: "sec_bg_image_xy_col_1",
+        props: {
+          text: "XY 커스텀 위치 텍스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const { getAllByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const sectionEl = getAllByTestId("preview-section").find(
+      (el) => (el as HTMLElement).dataset.sectionId === "sec_bg_image_xy",
+    ) as HTMLElement;
+    expect(sectionEl.style.backgroundImage).toContain("/images/section-bg-xy.png");
+    expect(sectionEl.style.backgroundSize).toBe("contain");
+    expect(sectionEl.style.backgroundPosition).toBe("25% 80%");
+  });
+
+  it("backgroundVideoSrc 가 설정된 섹션은 프리뷰에서도 배경 비디오 video 태그가 렌더되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "sec_bg_video",
+        type: "section",
+        props: {
+          background: "default",
+          paddingY: "md",
+          columns: [{ id: "sec_bg_video_col_1", span: 12 }],
+          backgroundVideoSrc: "/videos/section-bg-preview.mp4",
+        },
+      } as any,
+      {
+        id: "sec_bg_text_video",
+        type: "text",
+        sectionId: "sec_bg_video",
+        columnId: "sec_bg_video_col_1",
+        props: {
+          text: "섹션 배경 비디오 테스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const { getAllByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const sectionEl = getAllByTestId("preview-section").find(
+      (el) => (el as HTMLElement).dataset.sectionId === "sec_bg_video",
+    ) as HTMLElement;
+    expect(sectionEl).toBeTruthy();
+
+    const videoEl = getAllByTestId("preview-section-bg-video")[0] as HTMLVideoElement;
+    expect(videoEl).toBeTruthy();
+    expect(videoEl.src).toContain("/videos/section-bg-preview.mp4");
+    expect(videoEl.autoplay).toBe(true);
+    expect(videoEl.loop).toBe(true);
+    expect(videoEl.muted).toBe(true);
+  });
+});