video 블록 및 리펙터링

2025-11-27 10:07:59 +09:00
parent 672cca5271
commit 48e13d2a75
223 changed files with 8979 additions and 2125 deletions
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import type { SectionBlockProps } from "@/features/editor/state/editorStore";
 import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";

@@ -13,6 +13,103 @@ describe("SectionPropertiesPanel", () => {
    gapX: "md",
  };

+  afterEach(() => {
+    cleanup();
+  });
+
+  it("가로 위치 프리셋 드롭다운 변경 시 backgroundImagePositionXPercent 가 0/50/100 등으로 설정된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImagePositionMode: "custom",
+          backgroundImagePositionXPercent: 50,
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-xy-x"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const presetSelect = screen.getByLabelText("배경 이미지 가로 위치 프리셋");
+    fireEvent.change(presetSelect, { target: { value: "left" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-xy-x",
+      expect.objectContaining({ backgroundImagePositionXPercent: 0 }),
+    );
+  });
+
+  it("세로 위치 프리셋 드롭다운 변경 시 backgroundImagePositionYPercent 가 0/50/100 등으로 설정된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImagePositionMode: "custom",
+          backgroundImagePositionYPercent: 50,
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-xy-y"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const presetSelect = screen.getByLabelText("배경 이미지 세로 위치 프리셋");
+    fireEvent.change(presetSelect, { target: { value: "top" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-xy-y",
+      expect.objectContaining({ backgroundImagePositionYPercent: 0 }),
+    );
+  });
+
+  it("위치 모드를 custom 으로 두면 X/Y 퍼센트 슬라이더 변경 시 backgroundImagePositionXPercent/YPercent 가 업데이트된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImagePositionMode: "custom",
+          backgroundImagePositionXPercent: 50,
+          backgroundImagePositionYPercent: 50,
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-xy"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const xSlider = screen.getByLabelText("배경 이미지 가로 위치 슬라이더");
+    fireEvent.change(xSlider, { target: { value: "30" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-xy",
+      expect.objectContaining({
+        backgroundImagePositionMode: "custom",
+        backgroundImagePositionXPercent: 30,
+      }),
+    );
+
+    const ySlider = screen.getByLabelText("배경 이미지 세로 위치 슬라이더");
+    fireEvent.change(ySlider, { target: { value: "70" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-xy",
+      expect.objectContaining({
+        backgroundImagePositionMode: "custom",
+        backgroundImagePositionYPercent: 70,
+      }),
+    );
+  });
+
  it("세로 패딩 프리셋/슬라이더 변경 시 updateBlock 이 paddingYPx 로 호출된다", () => {
    const updateBlock = vi.fn();
    render(
@@ -28,4 +125,219 @@ describe("SectionPropertiesPanel", () => {

    expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
  });
+
+  it("배경 이미지 URL 인풋 변경 시 updateBlock 이 backgroundImageSrc/SourceType/AssetId 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{ ...baseProps, backgroundImageSrc: "", backgroundImageSourceType: "externalUrl" }}
+        selectedBlockId="section-2"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const urlInput = screen.getByLabelText("배경 이미지 URL");
+    fireEvent.change(urlInput, { target: { value: "https://example.com/bg.png" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-2",
+      expect.objectContaining({
+        backgroundImageSrc: "https://example.com/bg.png",
+        backgroundImageSourceType: "externalUrl",
+        backgroundImageAssetId: null,
+      }),
+    );
+  });
+
+  it("배경 이미지 크기 셀렉트 변경 시 updateBlock 이 backgroundImageSize 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImageSize: "cover",
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-3"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("배경 이미지 크기");
+    fireEvent.change(select, { target: { value: "contain" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-3",
+      expect.objectContaining({ backgroundImageSize: "contain" }),
+    );
+  });
+
+  it("배경 이미지 위치 셀렉트 변경 시 updateBlock 이 backgroundImagePosition 으로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImagePosition: "center",
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-4"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("배경 이미지 위치");
+    fireEvent.change(select, { target: { value: "top" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-4",
+      expect.objectContaining({ backgroundImagePosition: "top" }),
+    );
+  });
+
+  it("기본 상태에서는 배경 이미지 소스가 '없음' 이고, '없음' 선택 시 관련 필드가 초기화된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{ ...baseProps }}
+        selectedBlockId="section-0"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    expect(sourceSelect.value).toBe("none");
+
+    fireEvent.change(sourceSelect, { target: { value: "none" } });
+
+    expect(updateBlock).toHaveBeenCalledWith("section-0", {
+      backgroundImageSrc: undefined,
+      backgroundImageSourceType: undefined,
+      backgroundImageAssetId: null,
+    } as any);
+
+    // "없음" 상태에서는 크기/위치/반복 컨트롤이 렌더되지 않아야 한다.
+    expect(screen.queryByLabelText("배경 이미지 크기")).toBeNull();
+    expect(screen.queryByLabelText("배경 이미지 위치")).toBeNull();
+    expect(screen.queryByLabelText("배경 이미지 반복")).toBeNull();
+  });
+
+  it("배경 이미지 반복 셀렉트 변경 시 updateBlock 이 backgroundImageRepeat 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImageRepeat: "no-repeat",
+          backgroundImageSrc: "https://example.com/bg.png",
+          backgroundImageSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-6"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const repeatSelect = screen.getByLabelText("배경 이미지 반복");
+    fireEvent.change(repeatSelect, { target: { value: "repeat-x" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-6",
+      expect.objectContaining({ backgroundImageRepeat: "repeat-x" }),
+    );
+  });
+
+  it("배경 이미지 소스 셀렉트 변경 시 updateBlock 이 backgroundImageSourceType/backgroundImageAssetId 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundImageSrc: "/api/image/asset-1",
+          backgroundImageSourceType: "asset",
+          backgroundImageAssetId: "asset-1",
+        }}
+        selectedBlockId="section-5"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    expect(sourceSelect.value).toBe("upload");
+
+    fireEvent.change(sourceSelect, { target: { value: "url" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-5",
+      expect.objectContaining({
+        backgroundImageSourceType: "externalUrl",
+        backgroundImageAssetId: null,
+      }),
+    );
+  });
+
+  it("배경 비디오 URL 인풋 변경 시 updateBlock 이 backgroundVideoSrc/backgroundVideoSourceType/backgroundVideoAssetId 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundVideoSrc: "",
+          backgroundVideoSourceType: "externalUrl",
+        }}
+        selectedBlockId="section-video-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const urlInput = screen.getByLabelText("배경 비디오 URL");
+    fireEvent.change(urlInput, { target: { value: "https://example.com/bg-video.mp4" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-video-1",
+      expect.objectContaining({
+        backgroundVideoSrc: "https://example.com/bg-video.mp4",
+        backgroundVideoSourceType: "externalUrl",
+        backgroundVideoAssetId: null,
+      }),
+    );
+  });
+
+  it("배경 비디오 소스 셀렉트 변경 시 updateBlock 이 backgroundVideoSourceType/backgroundVideoAssetId 로 호출된다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundVideoSrc: "/api/video/asset-video-1",
+          backgroundVideoSourceType: "asset",
+          backgroundVideoAssetId: "asset-video-1",
+        }}
+        selectedBlockId="section-video-2"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const sourceSelect = screen.getByLabelText("배경 비디오 소스") as HTMLSelectElement;
+    expect(sourceSelect.value).toBe("upload");
+
+    fireEvent.change(sourceSelect, { target: { value: "url" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-video-2",
+      expect.objectContaining({
+        backgroundVideoSourceType: "externalUrl",
+        backgroundVideoAssetId: null,
+      }),
+    );
+  });
 });