테마 적용

tests/unit/LoginPage.spec.tsx

@@ -147,4 +147,84 @@ describe("LoginPage", () => {
       expect(pushMock).toHaveBeenCalledWith("/dashboard");
     });
   });
+
+  it("로그인 페이지는 전역 라이트/다크 테마 배경 클래스를 사용해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ message: "인증이 필요합니다." }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<LoginPage />);
+
+    const main = await screen.findByRole("main");
+    const className = (main as HTMLElement).className;
+
+    expect(className).toContain("bg-slate-100");
+    expect(className).toContain("dark:bg-slate-950");
+  });
+
+  it("비밀번호 입력 필드는 이메일 입력과 동일한 라이트/다크 테마 클래스를 사용해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ message: "인증이 필요합니다." }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+
+    const emailClass = emailInput.className;
+    const passwordClass = passwordInput.className;
+
+    expect(emailClass).toContain("border-slate-300");
+    expect(emailClass).toContain("bg-white");
+    expect(emailClass).toContain("text-slate-900");
+    expect(emailClass).toContain("dark:border-slate-700");
+    expect(emailClass).toContain("dark:bg-slate-950");
+    expect(emailClass).toContain("dark:text-slate-50");
+
+    expect(passwordClass).toBe(emailClass);
+  });
+
+  it("로그인 페이지에도 테마 전환 버튼이 있고 클릭 시 html 요소의 dark 클래스가 토글되어야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ message: "인증이 필요합니다." }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<LoginPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(fetchMock.mock.calls[0][0]).toBe("/api/auth/me");
+    });
+
+    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);
+  });
 });