1차 싱크 완료

tests/unit/EditorPageBackground.spec.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import EditorPage from "@/app/editor/page";
+
+let mockState: any;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "배경 테스트",
+    slug: "bg-test",
+    canvasPreset: "full",
+    canvasBgColorHex: "#111111",
+    bodyBgColorHex: "#222222",
+  } as ProjectConfig;
+
+  mockState = {
+    blocks: [] as Block[],
+    projectConfig: baseProjectConfig,
+    selectedBlockId: null as string | null,
+    selectedListItemId: null as string | null,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    removeBlock: vi.fn(),
+    duplicateBlock: vi.fn(),
+    selectBlock: vi.fn(),
+    selectListItem: vi.fn(),
+    replaceBlocks: vi.fn(),
+    reorderBlocks: vi.fn(),
+    moveBlock: vi.fn(),
+    addTextBlock: vi.fn(),
+    addButtonBlock: vi.fn(),
+    addImageBlock: vi.fn(),
+    addDividerBlock: vi.fn(),
+    addListBlock: vi.fn(),
+    addSectionBlock: vi.fn(),
+    addFormBlock: vi.fn(),
+    addFormInputBlock: vi.fn(),
+    addFormSelectBlock: vi.fn(),
+    addFormCheckboxBlock: vi.fn(),
+    addFormRadioBlock: vi.fn(),
+    addHeroTemplateSection: vi.fn(),
+    addFeaturesTemplateSection: vi.fn(),
+    addCtaTemplateSection: vi.fn(),
+    addFaqTemplateSection: vi.fn(),
+    addPricingTemplateSection: vi.fn(),
+    addTestimonialsTemplateSection: vi.fn(),
+    addBlogTemplateSection: vi.fn(),
+    addTeamTemplateSection: vi.fn(),
+    addFooterTemplateSection: vi.fn(),
+    updateBlock: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  (useEditorStore as any).getState = () => mockState;
+
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+describe("EditorPage - 페이지/캔버스 배경", () => {
+  it("main 요소는 bodyBgColorHex 로 직접 배경색을 갖지 않아야 하고, 캔버스 래퍼만 배경색을 가져야 한다", () => {
+    const { container } = render(<EditorPage />);
+
+    const mainEl = container.querySelector("main") as HTMLElement | null;
+    expect(mainEl).not.toBeNull();
+    // main 은 bodyBgColorHex 기반 배경색을 직접 갖지 않는다.
+    expect(mainEl!.style.backgroundColor).toBe("");
+
+    const canvasOuter = screen.getByTestId("editor-canvas") as HTMLElement;
+    expect(canvasOuter.style.backgroundColor).toBe("rgb(34, 34, 34)");
+  });
+});