1차 싱크 완료

tests/unit/ImagePropertiesPanel.spec.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ImagePropertiesPanel } from "@/app/editor/panels/ImagePropertiesPanel";
+import type { ImageBlockProps } from "@/features/editor/state/editorStore";
+
+// ImagePropertiesPanel 컨트롤 TDD
+// - 카드 배경색(backgroundColorCustom) HEX 인풋 변경 시 updateBlock 이 올바르게 호출되는지
+
+describe("ImagePropertiesPanel", () => {
+  const baseProps: ImageBlockProps = {
+    src: "/images/example.png",
+    alt: "예시 이미지",
+    align: "center",
+    widthMode: "auto",
+    borderRadius: "md",
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("카드 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, backgroundColorCustom: "#111111" }}
+        selectedBlockId="image-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const hexInput = screen.getByLabelText("이미지 카드 배경색 HEX");
+    fireEvent.change(hexInput, { target: { value: "#112233" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-1",
+      expect.objectContaining({ backgroundColorCustom: "#112233" }),
+    );
+  });
+});