테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
 import EditorPage from "@/app/editor/page";

@@ -97,4 +97,100 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
    const canvasOuter = screen.getByTestId("editor-canvas") as HTMLElement;
    expect(canvasOuter.style.backgroundColor).toBe("rgb(34, 34, 34)");
  });
+
+  it("main 요소는 전역 라이트/다크 테마 클래스(bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50)를 사용해야 한다", () => {
+    const { container } = render(<EditorPage />);
+
+    const mainEl = container.querySelector("main") as HTMLElement | null;
+    expect(mainEl).not.toBeNull();
+
+    const className = mainEl!.getAttribute("class") ?? "";
+    expect(className).toContain("bg-slate-100");
+    expect(className).toContain("text-slate-900");
+    expect(className).toContain("dark:bg-slate-950");
+    expect(className).toContain("dark:text-slate-50");
+  });
+
+  it("프로젝트 저장/불러오기 모달 카드는 라이트/다크 테마에 맞는 카드/인풋 크롬을 사용해야 한다", () => {
+    render(<EditorPage />);
+
+    const menuButton = screen.getByRole("button", { name: /메뉴/ });
+    fireEvent.click(menuButton);
+
+    const projectMenuItem = screen.getByRole("button", { name: "프로젝트 저장/불러오기" });
+    fireEvent.click(projectMenuItem);
+
+    const heading = screen.getByText("프로젝트 저장 / 불러오기");
+    const headerDiv = heading.closest("div") as HTMLDivElement | null;
+    expect(headerDiv).not.toBeNull();
+
+    const card = headerDiv!.parentElement as HTMLDivElement | null;
+    expect(card).not.toBeNull();
+
+    const cardClass = card!.getAttribute("class") ?? "";
+    expect(cardClass).toContain("bg-white");
+    expect(cardClass).toContain("text-slate-900");
+    expect(cardClass).toContain("border-slate-200");
+    expect(cardClass).toContain("dark:bg-slate-900");
+    expect(cardClass).toContain("dark:text-slate-100");
+    expect(cardClass).toContain("dark:border-slate-700");
+
+    const titleSpan = Array.from(card!.querySelectorAll("span")).find(
+      (el) => el.textContent === "프로젝트 제목",
+    );
+    expect(titleSpan).not.toBeUndefined();
+    const titleWrapper = (titleSpan as HTMLSpanElement).parentElement as HTMLElement | null;
+    expect(titleWrapper).not.toBeNull();
+
+    const titleInput = titleWrapper!.querySelector("input") as HTMLInputElement | null;
+    expect(titleInput).not.toBeNull();
+
+    const inputClass = titleInput!.getAttribute("class") ?? "";
+    expect(inputClass).toContain("bg-white");
+    expect(inputClass).toContain("text-slate-900");
+    expect(inputClass).toContain("border-slate-300");
+    expect(inputClass).toContain("dark:bg-slate-900");
+    expect(inputClass).toContain("dark:text-slate-100");
+    expect(inputClass).toContain("dark:border-slate-700");
+  });
+
+  it("JSON Export / Import 모달 카드는 라이트/다크 테마에 맞는 카드/textarea 크롬을 사용해야 한다", () => {
+    render(<EditorPage />);
+
+    const menuButton = screen.getByRole("button", { name: /메뉴/ });
+    fireEvent.click(menuButton);
+
+    const jsonMenuItem = screen.getByRole("button", { name: "JSON 내보내기/불러오기" });
+    fireEvent.click(jsonMenuItem);
+
+    const heading = screen.getByText(/JSON Export \/ Import/);
+    const headerDiv = heading.closest("div") as HTMLDivElement | null;
+    expect(headerDiv).not.toBeNull();
+
+    const card = headerDiv!.parentElement as HTMLDivElement | null;
+    expect(card).not.toBeNull();
+
+    const cardClass = card!.getAttribute("class") ?? "";
+    expect(cardClass).toContain("bg-white");
+    expect(cardClass).toContain("text-slate-900");
+    expect(cardClass).toContain("border-slate-200");
+    expect(cardClass).toContain("dark:bg-slate-900");
+    expect(cardClass).toContain("dark:text-slate-100");
+    expect(cardClass).toContain("dark:border-slate-700");
+
+    const jsonLabel = screen.getByText("에디터 상태 JSON");
+    const jsonWrapper = jsonLabel.parentElement as HTMLElement | null;
+    expect(jsonWrapper).not.toBeNull();
+
+    const textarea = jsonWrapper!.querySelector("textarea") as HTMLTextAreaElement | null;
+    expect(textarea).not.toBeNull();
+
+    const textareaClass = textarea!.getAttribute("class") ?? "";
+    expect(textareaClass).toContain("bg-white");
+    expect(textareaClass).toContain("text-slate-900");
+    expect(textareaClass).toContain("border-slate-300");
+    expect(textareaClass).toContain("dark:bg-slate-900");
+    expect(textareaClass).toContain("dark:text-slate-100");
+    expect(textareaClass).toContain("dark:border-slate-700");
+  });
 });