테마 적용

tests/unit/EditorSelectionFocus.spec.tsx

@@ -87,6 +87,90 @@ vi.mock("next/navigation", () => {
 });
 
 describe("EditorPage - 선택 포커스", () => {
+  it("선택/비선택 블록 셸은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_1",
+        type: "text",
+        props: {
+          text: "첫 번째 블록",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+      {
+        id: "blk_2",
+        type: "text",
+        props: {
+          text: "두 번째 블록",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "blk_2";
+
+    render(<EditorPage />);
+
+    const allBlocks = screen.getAllByTestId("editor-block") as HTMLElement[];
+    const selected = allBlocks.find((el) => el.dataset.selected === "true");
+    const nonSelected = allBlocks.find((el) => el.dataset.selected !== "true");
+
+    expect(selected).toBeTruthy();
+    expect(nonSelected).toBeTruthy();
+
+    const selectedClass = selected!.className;
+    const nonSelectedClass = nonSelected!.className;
+
+    // 선택된 블록: 하이라이트 보더 + 라이트/다크 배경/텍스트 듀얼 테마
+    expect(selectedClass).toContain("border-sky-500");
+    expect(selectedClass).toContain("bg-sky-50");
+    expect(selectedClass).toContain("text-slate-900");
+    expect(selectedClass).toContain("dark:bg-slate-900/80");
+    expect(selectedClass).toContain("dark:text-slate-100");
+
+    // 비선택 블록: 기본 카드 크롬(라이트/다크 듀얼)
+    expect(nonSelectedClass).toContain("border-slate-200");
+    expect(nonSelectedClass).toContain("bg-white");
+    expect(nonSelectedClass).toContain("text-slate-900");
+    expect(nonSelectedClass).toContain("dark:border-slate-700");
+    expect(nonSelectedClass).toContain("dark:bg-slate-900");
+    expect(nonSelectedClass).toContain("dark:text-slate-100");
+  });
+
+  it("블록 드래그 핸들은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_1",
+        type: "text",
+        props: {
+          text: "첫 번째 블록",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "blk_1";
+
+    render(<EditorPage />);
+
+    const handle = screen.getByLabelText("블록 드래그 핸들") as HTMLButtonElement;
+    const className = handle.getAttribute("class") ?? "";
+
+    // 라이트 모드: 밝은 버튼 크롬
+    expect(className).toContain("border-slate-300");
+    expect(className).toContain("bg-slate-50");
+    expect(className).toContain("text-slate-500");
+    // 다크 모드: 기존 다크 톤 유지
+    expect(className).toContain("dark:border-slate-700");
+    expect(className).toContain("dark:bg-slate-900");
+    expect(className).toContain("dark:text-slate-400");
+  });
+
   it("선택된 블록은 editor-block 에 border-sky-500 / bg-slate-900/80 하이라이트를 가져야 한다", () => {
     const blocks: Block[] = [
       {
@@ -150,6 +234,40 @@ describe("EditorPage - 선택 포커스", () => {
     expect(sectionEl.className).toContain("border-sky-500");
   });
 
+	it("EditorPage 레이아웃은 main 에 h-screen 컨테이너를 사용하고, 좌/중/우 컬럼이 각각 스크롤되어야 한다", () => {
+		mockState.blocks = [];
+		mockState.selectedBlockId = null;
+
+		const { container } = render(<EditorPage />);
+
+		const main = container.querySelector("main") as HTMLElement;
+		expect(main).toBeTruthy();
+		const mainClass = main.getAttribute("class") ?? "";
+		// 전체 에디터는 뷰포트 높이에 맞춘 h-screen 컨테이너 안에서 동작해야 한다.
+		expect(mainClass).toContain("h-screen");
+		expect(mainClass).not.toContain("min-h-screen");
+		expect(mainClass).toContain("flex");
+		expect(mainClass).toContain("overflow-hidden");
+
+		// 좌측 BlocksSidebar 는 자체 스크롤(overflow-y-auto)을 가져야 한다.
+		const blocksSidebar = screen.getByTestId("blocks-sidebar") as HTMLElement;
+		const blocksClass = blocksSidebar.getAttribute("class") ?? "";
+		expect(blocksClass).toContain("overflow-y-auto");
+		expect(blocksClass).toContain("pb-scroll");
+
+		// 중앙 EditorCanvas 는 자체 스크롤(overflow-auto)을 가져야 한다.
+		const canvas = screen.getByTestId("editor-canvas") as HTMLElement;
+		const canvasClass = canvas.getAttribute("class") ?? "";
+		expect(canvasClass).toContain("overflow-auto");
+		expect(canvasClass).toContain("pb-scroll");
+
+		// 우측 PropertiesSidebar 도 자체 스크롤(overflow-auto)을 가져야 한다.
+		const propsSidebar = screen.getByTestId("properties-sidebar") as HTMLElement;
+		const propsClass = propsSidebar.getAttribute("class") ?? "";
+		expect(propsClass).toContain("overflow-auto");
+		expect(propsClass).toContain("pb-scroll");
+	});
+
   it("섹션 자식 블록을 선택해도 섹션 wrapper 가 강조되어야 한다", () => {
     const section: Block = {
       id: "sec_1",