테마 적용

tests/unit/EditorCanvasBackground.spec.tsx

@@ -1,7 +1,7 @@
 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";
+import { EditorCanvas, EditorCanvasDragPreview } from "@/app/editor/EditorCanvas";
 
 // 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
 // - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
@@ -73,4 +73,30 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
     // custom 프리셋에서는 canvasWidthPx 값이 그대로 사용된다.
     expect(renderWithConfig({ canvasPreset: "custom", canvasWidthPx: 1024 })).toBe("1024px");
   });
+
+  it("DragOverlay 프리뷰는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const block: Block = {
+      id: "drag_1",
+      type: "text",
+      props: {
+        text: "드래그 미리보기",
+        align: "left",
+        size: "base",
+      },
+    } as any;
+
+    const { container } = render(<EditorCanvasDragPreview block={block} />);
+
+    const overlay = container.querySelector(
+      "div.pointer-events-none.rounded.border",
+    ) as HTMLElement | null;
+    expect(overlay).not.toBeNull();
+
+    const className = overlay!.getAttribute("class") ?? "";
+    expect(className).toContain("border-sky-500");
+    expect(className).toContain("bg-white");
+    expect(className).toContain("text-slate-900");
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-100");
+  });
 });