TDD,E2E 개선, 미적용 스타일 개선

tests/unit/ImagePropertiesPanel.spec.tsx

@@ -38,4 +38,158 @@ describe("ImagePropertiesPanel", () => {
       expect.objectContaining({ backgroundColorCustom: "#112233" }),
     );
   });
+
+  it("이미지 소스 셀렉트에서 url 선택 시 sourceType 이 externalUrl 이 되고 assetId 가 null 로 설정되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{
+          ...baseProps,
+          src: "/api/image/asset-1",
+          sourceType: "asset",
+          assetId: "asset-1",
+        } as any}
+        selectedBlockId="image-source-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 소스");
+    fireEvent.change(select, { target: { value: "url" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-source-1",
+      expect.objectContaining({ sourceType: "externalUrl", assetId: null }),
+    );
+  });
+
+  it("이미지 URL 인풋 변경 시 src / sourceType / assetId 가 externalUrl/null 로 업데이트되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{
+          ...baseProps,
+          src: "https://example.com/before.png",
+          sourceType: "externalUrl",
+          assetId: "old-asset",
+        } as any}
+        selectedBlockId="image-url-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const urlInput = screen.getByLabelText("이미지 URL");
+    fireEvent.change(urlInput, { target: { value: "https://example.com/after.png" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-url-1",
+      expect.objectContaining({
+        src: "https://example.com/after.png",
+        sourceType: "externalUrl",
+        assetId: null,
+      }),
+    );
+  });
+
+  it("대체 텍스트 인풋 변경 시 updateBlock 이 alt 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={baseProps}
+        selectedBlockId="image-alt-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const altInput = screen.getByLabelText("대체 텍스트");
+    fireEvent.change(altInput, { target: { value: "새 대체 텍스트" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-alt-1",
+      expect.objectContaining({ alt: "새 대체 텍스트" }),
+    );
+  });
+
+  it("이미지 정렬 셀렉트 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, align: "center" }}
+        selectedBlockId="image-align-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 정렬");
+    fireEvent.change(select, { target: { value: "left" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-align-1",
+      expect.objectContaining({ align: "left" }),
+    );
+  });
+
+  it("너비 모드 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, widthMode: "auto" }}
+        selectedBlockId="image-width-mode-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 너비 모드");
+    fireEvent.change(select, { target: { value: "fixed" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-width-mode-1",
+      expect.objectContaining({ widthMode: "fixed" }),
+    );
+  });
+
+  it("너비 모드가 fixed 일 때 고정 너비 슬라이더 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, widthMode: "fixed", widthPx: 320 }}
+        selectedBlockId="image-width-fixed-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("고정 너비 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "480" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-width-fixed-1",
+      expect.objectContaining({ widthPx: 480 }),
+    );
+  });
+
+  it("모서리 둥글기 슬라이더 변경 시 updateBlock 이 borderRadius 와 borderRadiusPx 를 함께 업데이트해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, borderRadius: "md", borderRadiusPx: 60 }}
+        selectedBlockId="image-radius-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    fireEvent.change(slider, { target: { value: "24" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-radius-1",
+      expect.objectContaining({ borderRadius: "sm", borderRadiusPx: 24 }),
+    );
+  });
 });