테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -144,6 +144,114 @@ describe("ProjectsPage - 프로젝트 목록", () => {
    expect(link.closest("a")?.getAttribute("href")).toBe("/dashboard");
  });

+  it("프로젝트 목록 테이블은 라이트/다크 테마에서 읽기 쉬운 텍스트 색상을 사용해야 한다", async () => {
+    const projects = [
+      {
+        id: "1",
+        title: "테스트 프로젝트 A",
+        slug: "test-project-a",
+        status: "DRAFT",
+        createdAt: "2025-01-01T00:00:00.000Z",
+        updatedAt: "2025-01-01T00:00:00.000Z",
+      },
+    ];
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(projects), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const titleCellNode = await screen.findByText("테스트 프로젝트 A");
+    const titleCell = titleCellNode.closest("td") as HTMLElement | null;
+    expect(titleCell).not.toBeNull();
+
+    const titleClassName = titleCell!.className;
+    expect(titleClassName).toContain("text-slate-900");
+    expect(titleClassName).toContain("dark:text-slate-100");
+
+    const slugCellNode = screen.getByText("test-project-a");
+    const slugCell = slugCellNode.closest("td") as HTMLElement | null;
+    expect(slugCell).not.toBeNull();
+
+    const slugClassName = slugCell!.className;
+    expect(slugClassName).toContain("text-slate-600");
+    expect(slugClassName).toContain("dark:text-slate-300");
+  });
+
+  it("상단 툴바/액션 링크/페이지네이션은 라이트/다크 테마 모두에서 읽기 쉬운 색상 클래스를 사용해야 한다", async () => {
+    const projects = [
+      {
+        id: "1",
+        title: "테스트 프로젝트 A",
+        slug: "test-project-a",
+        status: "DRAFT",
+        createdAt: "2025-01-01T00:00:00.000Z",
+        updatedAt: "2025-01-01T00:00:00.000Z",
+      },
+    ];
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(projects), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const toolbar = await screen.findByTestId("projects-toolbar");
+    const toolbarClass = toolbar.className;
+    expect(toolbarClass).toContain("text-slate-600");
+    expect(toolbarClass).toContain("dark:text-slate-300");
+
+    const editLink = screen.getByText("편집").closest("a") as HTMLElement | null;
+    expect(editLink).not.toBeNull();
+    const editClass = editLink!.className;
+    expect(editClass).toContain("text-sky-600");
+    expect(editClass).toContain("dark:text-sky-300");
+
+    const previewLink = screen.getByText("미리보기").closest("a") as HTMLElement | null;
+    expect(previewLink).not.toBeNull();
+    const previewClass = previewLink!.className;
+    expect(previewClass).toContain("text-slate-600");
+    expect(previewClass).toContain("dark:text-slate-300");
+
+    const submissionsLink = screen.getByText("폼 제출 내역").closest("a") as HTMLElement | null;
+    expect(submissionsLink).not.toBeNull();
+    const submissionsClass = submissionsLink!.className;
+    expect(submissionsClass).toContain("text-emerald-600");
+    expect(submissionsClass).toContain("dark:text-emerald-300");
+
+    const deleteButton = screen.getByText("삭제").closest("button") as HTMLElement | null;
+    expect(deleteButton).not.toBeNull();
+    const deleteClass = deleteButton!.className;
+    expect(deleteClass).toContain("text-red-600");
+    expect(deleteClass).toContain("dark:text-red-300");
+
+    const prevButton = screen.getByRole("button", { name: "이전" });
+    const prevClass = prevButton.className;
+    expect(prevClass).toContain("border-slate-300");
+    expect(prevClass).toContain("text-slate-700");
+    expect(prevClass).toContain("dark:border-slate-700");
+    expect(prevClass).toContain("dark:text-slate-300");
+  });
+
  it("GNB에서 현재 페이지인 '프로젝트 목록' 탭에 aria-current=\"page\"가 설정되어야 한다", async () => {
    const projects = [
      {