1차 싱크 완료

tests/unit/EditorCanvasBackground.spec.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { EditorCanvas } from "@/app/editor/EditorCanvas";
+
+// 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
+// - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
+// - bodyBgColorHex: 에디터 내 페이지 배경(캔버스 바깥 래퍼)의 배경색
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("EditorCanvas - 캔버스/페이지 배경색", () => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "배경 테스트",
+    slug: "bg-test",
+    canvasPreset: "full",
+    canvasBgColorHex: "#111111",
+    bodyBgColorHex: "#222222",
+  };
+
+  const baseProps = {
+    blocks: [] as Block[],
+    rootBlocks: [] as Block[],
+    selectedBlockId: null as string | null,
+    editingBlockId: null as string | null,
+    editingText: "",
+    activeDragId: null as string | null,
+    sensors: null as any,
+    onCanvasEmptyClick: () => {},
+    renderBlocks: () => null as any,
+    handleDragStart: () => {},
+    handleDragEnd: () => {},
+    handleDragCancel: () => {},
+    projectConfig: baseProjectConfig,
+  };
+
+  it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => {
+    render(<EditorCanvas {...baseProps} />);
+
+    const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement;
+
+    expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
+  });
+
+  it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => {
+    const { container } = render(<EditorCanvas {...baseProps} />);
+
+    const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null;
+
+    expect(outer).not.toBeNull();
+    expect(outer!.style.backgroundColor).toBe("rgb(34, 34, 34)");
+  });
+
+  it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => {
+    const renderWithConfig = (partial: Partial<ProjectConfig>) => {
+      const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig;
+      const { getByTestId, unmount } = render(<EditorCanvas {...baseProps} projectConfig={projectConfig} />);
+      const inner = getByTestId("editor-canvas-inner") as HTMLElement;
+      const maxWidth = inner.style.maxWidth;
+      unmount();
+      return maxWidth;
+    };
+
+    expect(renderWithConfig({ canvasPreset: "mobile", canvasWidthPx: 390 })).toBe("390px");
+    expect(renderWithConfig({ canvasPreset: "tablet", canvasWidthPx: 768 })).toBe("768px");
+    expect(renderWithConfig({ canvasPreset: "desktop", canvasWidthPx: 1200 })).toBe("1200px");
+
+    // full 프리셋에서 canvasWidthPx 가 없으면 maxWidth 는 비워져 있어야 한다.
+    expect(renderWithConfig({ canvasPreset: "full", canvasWidthPx: undefined })).toBe("");
+
+    // custom 프리셋에서는 canvasWidthPx 값이 그대로 사용된다.
+    expect(renderWithConfig({ canvasPreset: "custom", canvasWidthPx: 1024 })).toBe("1024px");
+  });
+});