1차 싱크 완료

tests/unit/PreviewCanvasPreset.spec.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, afterEach, vi, beforeEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import PreviewPage from "@/app/preview/page";
+import type { ProjectConfig, Block } from "@/features/editor/state/editorStore";
+
+// PreviewPage 캔버스 프리셋/폭/배경색 TDD
+// - canvasPreset / canvasWidthPx / canvasBgColorHex / bodyBgColorHex 가
+//   preview-canvas-inner 및 main 배경에 올바르게 반영되는지 검증한다.
+
+let mockState: any;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "프리뷰 캔버스 테스트",
+    slug: "preview-canvas-test",
+    canvasPreset: "full",
+    canvasBgColorHex: "#0f172a",
+    bodyBgColorHex: "#020617",
+  };
+
+  mockState = {
+    blocks: [] as Block[],
+    projectConfig: baseProjectConfig,
+  };
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PreviewPage - canvasPreset / canvasWidthPx", () => {
+  it("mobile 프리셋 + canvasWidthPx=390 은 preview-canvas-inner maxWidth 를 390px 로 설정해야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "mobile",
+      canvasWidthPx: 390,
+    } as ProjectConfig;
+
+    render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("390px");
+  });
+
+  it("tablet 프리셋 + canvasWidthPx=768 은 maxWidth 를 768px 로 설정해야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "tablet",
+      canvasWidthPx: 768,
+    } as ProjectConfig;
+
+    render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("768px");
+  });
+
+  it("desktop 프리셋 + canvasWidthPx=1200 은 maxWidth 를 1200px 로 설정해야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "desktop",
+      canvasWidthPx: 1200,
+    } as ProjectConfig;
+
+    render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("1200px");
+  });
+
+  it("full 프리셋에서 canvasWidthPx 가 없으면 maxWidth 는 비워져 있어야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "full",
+      canvasWidthPx: undefined,
+    } as ProjectConfig;
+
+    render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("");
+  });
+
+  it("custom 프리셋 + canvasWidthPx=1024 는 maxWidth 를 1024px 로 설정해야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "custom",
+      canvasWidthPx: 1024,
+    } as ProjectConfig;
+
+    render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    expect(inner.style.maxWidth).toBe("1024px");
+  });
+
+  it("canvasBgColorHex 와 bodyBgColorHex 가 각각 preview-canvas-inner 및 main 배경에 적용되어야 한다", () => {
+    mockState.projectConfig = {
+      ...(mockState.projectConfig as ProjectConfig),
+      canvasPreset: "full",
+      canvasBgColorHex: "#111111",
+      bodyBgColorHex: "#222222",
+    } as ProjectConfig;
+
+    const { container } = render(<PreviewPage />);
+
+    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
+    const main = container.querySelector("main") as HTMLElement;
+
+    expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
+    expect(main.style.backgroundColor).toBe("rgb(34, 34, 34)");
+  });
+});