테마 적용

tests/unit/ProjectSubmissionsPage.spec.tsx

@@ -135,7 +135,7 @@ describe("ProjectSubmissionsPage - 폼 제출 내역", () => {
     expect(errorText).toBeTruthy();
   });
 
-  it("상단에 '프로젝트 목록' 링크가 있고 클릭 시 /projects 로 이동해야 한다", async () => {
+  it("상단에 '프로젝트 목록' 링크가 있고 href 가 /projects 이어야 한다", async () => {
     useParamsMock.mockReturnValue({ slug: "test-project" });
 
     const fetchMock = vi.fn().mockResolvedValue(
@@ -151,11 +151,99 @@ describe("ProjectSubmissionsPage - 폼 제출 내역", () => {
 
     const backLink = await screen.findByRole("link", { name: "프로젝트 목록" });
     expect(backLink).toBeTruthy();
+    expect(backLink.getAttribute("href")).toBe("/projects");
+  });
 
-    backLink.click();
+  it("상단 헤더에 공통 GNB와 테마 전환 버튼이 노출되고 테마 토글이 html 요소의 dark 클래스를 토글해야 한다", async () => {
+    useParamsMock.mockReturnValue({ slug: "test-project" });
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify([]), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<ProjectSubmissionsPage />);
 
     await waitFor(() => {
-      expect(pushMock).toHaveBeenCalledWith("/projects");
+      expect(fetchMock).toHaveBeenCalledTimes(1);
     });
+
+    const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
+    const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
+    const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
+
+    expect(dashboardLink.getAttribute("href")).toBe("/dashboard");
+    expect(projectsLink.getAttribute("href")).toBe("/projects");
+    expect(submissionsLink.getAttribute("href")).toBe("/projects/submissions");
+
+    const html = document.documentElement;
+    html.classList.remove("dark");
+
+    const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
+
+    expect(html.classList.contains("dark")).toBe(false);
+
+    themeToggleButton.click();
+
+    expect(html.classList.contains("dark")).toBe(true);
+
+    themeToggleButton.click();
+
+    expect(html.classList.contains("dark")).toBe(false);
+  });
+
+  it("프로젝트별 제출 내역 테이블은 라이트 테마에서 읽기 쉬운 텍스트 색상을 사용해야 한다", async () => {
+    useParamsMock.mockReturnValue({ slug: "test-project" });
+
+    const submissions = [
+      {
+        id: "1",
+        createdAt: "2025-01-01T12:00:00.000Z",
+        projectSlug: "test-project",
+        payload: {
+          name: "홍길동",
+          email: "user@example.com",
+          phone: "010-1234-5678",
+          birthdate: "1990-01-01",
+          message: "안녕하세요",
+        },
+      },
+    ];
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(submissions), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    const { container } = render(<ProjectSubmissionsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const headerRow = container.querySelector("thead tr") as HTMLElement | null;
+    expect(headerRow).not.toBeNull();
+
+    const headerClass = headerRow!.className;
+    expect(headerClass).toContain("border-slate-200");
+    expect(headerClass).toContain("text-slate-600");
+    expect(headerClass).toContain("dark:border-slate-800");
+    expect(headerClass).toContain("dark:text-slate-400");
+
+    const nameCellNode = await screen.findByText("홍길동");
+    const nameCell = nameCellNode.closest("td") as HTMLElement | null;
+    expect(nameCell).not.toBeNull();
+
+    const nameClass = nameCell!.className;
+    expect(nameClass).toContain("text-slate-900");
+    expect(nameClass).toContain("dark:text-slate-100");
   });
 });