[Feat/#81] 클라이언트 Auth Apis 연동

apps/customer/src/app/login/_components/KakaoLoginButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Icon } from "@compasser/design-system";
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface KakaoLoginButtonProps {
+  onClick: () => void;
+}
+
+export default function KakaoLoginButton({
+  onClick,
+}: KakaoLoginButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={LOGIN_TEXT.kakaoLoginButton}
+      className="relative flex w-full items-center justify-center rounded-[8px] bg-[#FEE500] px-[1.2rem] py-[1rem]"
+    >
+      <div className="absolute left-[1.4rem] top-1/2 -translate-y-1/2">
+        <Icon name="KakaoLogo" width={23} height={23} ariaHidden={true} />
+      </div>
+
+      <span className="head3-m text-[#191919]">
+        {LOGIN_TEXT.kakaoLoginButton}
+      </span>
+    </button>
+  );
+}

apps/customer/src/app/login/_components/LoginForm.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Input, Button } from "@compasser/design-system";
+import type { LoginReqDTO } from "@compasser/api";
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface LoginFormProps {
+  values: LoginReqDTO;
+  isPending: boolean;
+  onChangeEmail: (value: string) => void;
+  onChangePassword: (value: string) => void;
+  onSubmit: () => void;
+}
+
+export default function LoginForm({
+  values,
+  isPending,
+  onChangeEmail,
+  onChangePassword,
+  onSubmit,
+}: LoginFormProps) {
+  return (
+    <>
+      <div className="w-full">
+        <p className="body2-m pb-[0.2rem] text-default">
+          {LOGIN_TEXT.emailLabel}
+        </p>
+        <Input
+          type="email"
+          placeholder={LOGIN_TEXT.emailPlaceholder}
+          value={values.email}
+          onChange={(e) => onChangeEmail(e.target.value)}
+        />
+      </div>
+
+      <div className="mt-[2rem] mb-[5.2rem] w-full">
+        <p className="body2-m pb-[0.2rem] text-default">
+          {LOGIN_TEXT.passwordLabel}
+        </p>
+        <Input
+          type="password"
+          placeholder={LOGIN_TEXT.passwordPlaceholder}
+          value={values.password}
+          onChange={(e) => onChangePassword(e.target.value)}
+        />
+      </div>
+
+      <div className="w-full">
+        <Button
+          type="button"
+          size="lg"
+          kind="default"
+          variant="primary"
+          onClick={onSubmit}
+          disabled={isPending}
+        >
+          {isPending
+            ? LOGIN_TEXT.loginPendingButton
+            : LOGIN_TEXT.loginButton}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/customer/src/app/login/_components/SignupLinkButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface SignupLinkButtonProps {
+  onClick: () => void;
+}
+
+export default function SignupLinkButton({
+  onClick,
+}: SignupLinkButtonProps) {
+  return (
+    <div className="mt-[1.6rem] flex justify-center">
+      <button
+        type="button"
+        onClick={onClick}
+        className="body1-m text-gray-700 underline underline-offset-[0.2rem]"
+      >
+        {LOGIN_TEXT.signupButton}
+      </button>
+    </div>
+  );
+}

apps/customer/src/app/login/_constants/login.constants.ts

@@ -0,0 +1,11 @@
+export const LOGIN_TEXT = {
+  emailLabel: "이메일",
+  emailPlaceholder: "이메일을 입력해주세요",
+  passwordLabel: "비밀번호",
+  passwordPlaceholder: "비밀번호를 입력해주세요",
+  loginButton: "일반 로그인",
+  loginPendingButton: "로그인 중...",
+  kakaoLoginButton: "카카오 로그인",
+  signupButton: "회원가입",
+  emptyFieldMessage: "이메일과 비밀번호를 입력해주세요.",
+} as const;

apps/customer/src/app/login/page.tsx

@@ -1,17 +1,70 @@
 "use client";
 
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Input, Button, Icon } from "@compasser/design-system";
+import type { LoginReqDTO } from "@compasser/api";
+import LoginForm from "./_components/LoginForm";
+import KakaoLoginButton from "./_components/KakaoLoginButton";
+import SignupLinkButton from "./_components/SignupLinkButton";
+import { LOGIN_TEXT } from "./_constants/login.constants";
+import { useLoginMutation } from "@/shared/queries/mutation/auth/useLoginMutation";
 
 export default function LoginPage() {
   const router = useRouter();
+  const loginMutation = useLoginMutation();
+
+  const [formValues, setFormValues] = useState<LoginReqDTO>({
+    email: "",
+    password: "",
+  });
 
   const handleMoveRoleSelect = () => {
     router.push("/role-select");
   };
 
+  const handleChangeEmail = (value: string) => {
+    setFormValues((prev) => ({
+      ...prev,
+      email: value,
+    }));
+  };
+
+  const handleChangePassword = (value: string) => {
+    setFormValues((prev) => ({
+      ...prev,
+      password: value,
+    }));
+  };
+
   const handleLogin = () => {
-    console.log("일반 로그인");
+    const email = formValues.email.trim();
+    const password = formValues.password.trim();
+
+    if (!email || !password) {
+      console.log(LOGIN_TEXT.emptyFieldMessage);
+      return;
+    }
+
+    loginMutation.mutate(
+      {
+        email,
+        password,
+      },
+      {
+        onSuccess: (response) => {
+          const accessToken = response.data.accessToken;
+
+          if (typeof window !== "undefined") {
+            localStorage.setItem("accessToken", accessToken);
+          }
+
+          router.push("/main");
+        },
+        onError: (error) => {
+          console.log("일반 로그인 실패", error);
+        },
+      },
+    );
   };
 
   const handleKakaoLogin = () => {
@@ -22,57 +75,19 @@ export default function LoginPage() {
     <main className="flex min-h-screen w-full items-center justify-center px-[1.6rem]">
       <section className="w-full">
         <div className="flex flex-col">
-          <div className="w-full">
-            <p className="body2-m pb-[0.2rem] text-default">이메일</p>
-            <Input type="email" placeholder="이메일을 입력해주세요" />
-          </div>
-
-          <div className="mt-[2rem] mb-[5.2rem] w-full">
-            <p className="body2-m pb-[0.2rem] text-default">비밀번호</p>
-            <Input type="password" placeholder="비밀번호를 입력해주세요" />
-          </div>
-
-          <div className="w-full">
-            <Button
-              type="button"
-              size="lg"
-              kind="default"
-              variant="primary"
-              onClick={handleLogin}
-            >
-              일반 로그인
-            </Button>
-          </div>
+          <LoginForm
+            values={formValues}
+            isPending={loginMutation.isPending}
+            onChangeEmail={handleChangeEmail}
+            onChangePassword={handleChangePassword}
+            onSubmit={handleLogin}
+          />
 
           <div className="mt-[1.2rem] w-full">
-            <button
-              type="button"
-              onClick={handleKakaoLogin}
-              aria-label="카카오 로그인"
-              className="relative flex w-full items-center justify-center rounded-[8px] bg-[#FEE500] px-[1.2rem] py-[1rem]"
-            >
-              <div className="absolute left-[1.4rem] top-1/2 -translate-y-1/2">
-                <Icon
-                  name="KakaoLogo"
-                  width={23}
-                  height={23}
-                  ariaHidden={true}
-                />
-              </div>
-
-              <span className="head3-m text-[#191919]">카카오 로그인</span>
-            </button>
+            <KakaoLoginButton onClick={handleKakaoLogin} />
           </div>
 
-          <div className="mt-[1.6rem] flex justify-center">
-            <button
-              type="button"
-              onClick={handleMoveRoleSelect}
-              className="body1-m text-gray-700 underline underline-offset-[0.2rem]"
-            >
-              회원가입
-            </button>
-          </div>
+          <SignupLinkButton onClick={handleMoveRoleSelect} />
         </div>
       </section>
     </main>

apps/customer/src/app/signup/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Input, Button } from "@compasser/design-system";
+import { useSignupMutation } from "@/shared/queries/mutation/auth/useSignupMutation";
 
 export default function SignupPage() {
   const router = useRouter();
@@ -12,29 +13,52 @@ export default function SignupPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
+  const [submitError, setSubmitError] = useState("");
+
+  const { mutateAsync: signUp, isPending } = useSignupMutation();
 
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-  const isEmailInvalid =
-    email.length > 0 && !emailRegex.test(email);
+  const isEmailInvalid = email.length > 0 && !emailRegex.test(email);
 
   const isPasswordMismatch =
     password.length > 0 &&
     passwordConfirm.length > 0 &&
     password !== passwordConfirm;
 
-  const handleSignup = () => {
-    if (isEmailInvalid || isPasswordMismatch) return;
+  const isFormInvalid =
+    !name.trim() ||
+    !nickname.trim() ||
+    !email.trim() ||
+    !password.trim() ||
+    !passwordConfirm.trim() ||
+    isEmailInvalid ||
+    isPasswordMismatch;
+
+  const handleSignup = async () => {
+    if (isFormInvalid || isPending) return;
+
+    setSubmitError("");
 
-    console.log("회원가입", {
-      name,
-      nickname,
-      email,
-      password,
-      passwordConfirm,
-    });
+    try {
+      await signUp({
+        memberName: name,
+        nickname,
+        email,
+        password,
+        passwordConfirm,
+      });
 
-    router.push("/main");
+      router.push("/login");
+    } catch (error) {
+      console.error("회원가입 실패", error);
+
+      setSubmitError(
+        error instanceof Error
+          ? error.message
+          : "회원가입 중 오류가 발생했습니다.",
+      );
+    }
   };
 
   return (
@@ -96,6 +120,10 @@ export default function SignupPage() {
               errorMessage="비밀번호가 일치하지 않습니다."
             />
           </div>
+
+          {submitError ? (
+            <p className="body3-m text-red-500">{submitError}</p>
+          ) : null}
         </div>
       </section>
 
@@ -106,8 +134,9 @@ export default function SignupPage() {
           kind="default"
           variant="primary"
           onClick={handleSignup}
+          disabled={isFormInvalid || isPending}
         >
-          회원가입
+          {isPending ? "회원가입 중..." : "회원가입"}
         </Button>
       </div>
     </main>