테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -56,10 +56,12 @@ describe("SignupPage", () => {

    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
    const submitButton = screen.getByRole("button", { name: "회원가입" });

    fireEvent.change(emailInput, { target: { value: "new@example.com" } });
    fireEvent.change(passwordInput, { target: { value: "securePass1" } });
+    fireEvent.change(confirmInput, { target: { value: "securePass1" } });

    fireEvent.click(submitButton);

@@ -118,10 +120,12 @@ describe("SignupPage", () => {

    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
    const submitButton = screen.getByRole("button", { name: "회원가입" });

    fireEvent.change(emailInput, { target: { value: "dup@example.com" } });
    fireEvent.change(passwordInput, { target: { value: "securePass1" } });
+    fireEvent.change(confirmInput, { target: { value: "securePass1" } });

    fireEvent.click(submitButton);

@@ -147,4 +151,196 @@ describe("SignupPage", () => {
      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(<SignupPage />);
+
+    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(<SignupPage />);
+
+    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
+
+    const emailClass = emailInput.className;
+    const passwordClass = passwordInput.className;
+    const confirmClass = confirmInput.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);
+    expect(confirmClass).toBe(emailClass);
+  });
+
+  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(<SignupPage />);
+
+    const confirmInput = await screen.findByLabelText("비밀번호 확인");
+    expect(confirmInput).toBeTruthy();
+  });
+
+  it("비밀번호와 비밀번호 확인이 일치하지 않으면 회원가입 요청을 보내지 말고 오류 메시지를 표시해야 한다", async () => {
+    const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
+      const url = typeof input === "string" ? input : input.url;
+      const method = init?.method ?? "GET";
+
+      if (url === "/api/auth/me" && method === "GET") {
+        return Promise.resolve(
+          new Response(JSON.stringify({ message: "인증이 필요합니다." }), {
+            status: 401,
+            headers: { "Content-Type": "application/json" },
+          }),
+        );
+      }
+
+      if (url === "/api/auth/signup" && method === "POST") {
+        return Promise.resolve(
+          new Response(JSON.stringify({ id: "1", email: "new@example.com" }), {
+            status: 201,
+            headers: { "Content-Type": "application/json" },
+          }),
+        );
+      }
+
+      return Promise.resolve(new Response(null, { status: 500 }));
+    });
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<SignupPage />);
+
+    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "회원가입" });
+
+    fireEvent.change(emailInput, { target: { value: "new@example.com" } });
+    fireEvent.change(passwordInput, { target: { value: "securePass1" } });
+    fireEvent.change(confirmInput, { target: { value: "differentPass2" } });
+
+    fireEvent.click(submitButton);
+
+    const errorText = await screen.findByText(/비밀번호와 비밀번호 확인이 일치하지 않습니다/);
+    expect(errorText).toBeTruthy();
+
+    const signupCall = fetchMock.mock.calls.find(([url, options]) => {
+      return url === "/api/auth/signup" && options?.method === "POST";
+    });
+
+    expect(signupCall).toBeUndefined();
+  });
+
+  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(<SignupPage />);
+
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+
+    fireEvent.change(passwordInput, { target: { value: "abc12345" } });
+
+    const weakText = await screen.findByText("비밀번호 난이도: 약함");
+    expect(weakText).toBeTruthy();
+
+    const bar = await screen.findByTestId("password-strength-bar");
+    const barClass = bar.className;
+    expect(barClass).toContain("w-1/3");
+    expect(barClass).toContain("bg-red-500");
+  });
+
+  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(<SignupPage />);
+
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+
+    fireEvent.change(passwordInput, { target: { value: "Abc12345" } });
+
+    const mediumText = await screen.findByText("비밀번호 난이도: 보통");
+    expect(mediumText).toBeTruthy();
+
+    const bar = await screen.findByTestId("password-strength-bar");
+    const barClass = bar.className;
+    expect(barClass).toContain("w-2/3");
+    expect(barClass).toContain("bg-amber-500");
+  });
+
+  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(<SignupPage />);
+
+    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+
+    fireEvent.change(passwordInput, { target: { value: "Abc12345!@" } });
+
+    const strongText = await screen.findByText("비밀번호 난이도: 강함");
+    expect(strongText).toBeTruthy();
+
+    const bar = await screen.findByTestId("password-strength-bar");
+    const barClass = bar.className;
+    expect(barClass).toContain("w-full");
+    expect(barClass).toContain("bg-emerald-600");
+  });
 });