테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+describe("ColorPickerField - 테마", () => {
+  it("HEX 텍스트 인풋은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    render(
+      <ColorPickerField
+        label="색상"
+        ariaLabelColorInput="컬러 입력"
+        ariaLabelHexInput="HEX 입력"
+        value="#ff0000"
+        onChange={() => {}}
+        palette={TEXT_COLOR_PALETTE}
+      />,
+    );
+
+    const hexInput = screen.getByLabelText("HEX 입력") as HTMLInputElement;
+    const className = hexInput.getAttribute("class") ?? "";
+
+    // 라이트 모드: 흰 배경 + 어두운 텍스트
+    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");
+  });
+
+  it("팔레트 드롭다운 요약 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
+    render(
+      <ColorPickerField
+        label="색상"
+        ariaLabelColorInput="컬러 입력"
+        ariaLabelHexInput="HEX 입력"
+        value="#ff0000"
+        onChange={() => {}}
+        palette={TEXT_COLOR_PALETTE}
+      />,
+    );
+
+    const [label] = screen.getAllByText("색상 팔레트");
+    const button = label.closest("button") as HTMLButtonElement | null;
+    expect(button).not.toBeNull();
+
+    const className = button!.getAttribute("class") ?? "";
+
+    // 라이트 모드: 밝은 배경 + 어두운 텍스트
+    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");
+  });
+
+  it("팔레트 드롭다운 항목은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+    render(
+      <ColorPickerField
+        label="색상"
+        ariaLabelColorInput="컬러 입력"
+        ariaLabelHexInput="HEX 입력"
+        value="#ff0000"
+        onChange={() => {}}
+        palette={TEXT_COLOR_PALETTE}
+      />, 
+    );
+
+    // 드롭다운을 연다
+    const [label] = screen.getAllByText("색상 팔레트");
+    const toggleButton = label.closest("button") as HTMLButtonElement | null;
+    expect(toggleButton).not.toBeNull();
+    fireEvent.click(toggleButton!);
+
+    // 팔레트 첫 항목("기본") 버튼을 찾는다
+    const itemButton = screen.getByRole("button", { name: "기본" }) as HTMLButtonElement;
+    const className = itemButton.getAttribute("class") ?? "";
+
+    // 라이트 모드: 흰 배경 + 어두운 텍스트
+    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");
+
+    // 색상 불렛(span)은 테두리를 가져야 한다 (흰색/투명 색상도 배경과 구분되도록)
+    const bullet = itemButton.querySelector("span span") as HTMLSpanElement | null;
+    expect(bullet).not.toBeNull();
+    const bulletClass = bullet!.getAttribute("class") ?? "";
+    expect(bulletClass).toContain("rounded-full");
+    expect(bulletClass).toContain("border");
+    expect(bulletClass).toContain("border-slate-300");
+    expect(bulletClass).toContain("dark:border-slate-700");
+  });
+});