[fix] 로그인, 회원가입 페이지 버그 수정

src/Router.tsx

@@ -12,8 +12,8 @@ import { ROUTES } from "./constants/router";
 import AuthLayout from "./layouts/AuthLayout";
 import MainLayout from "./layouts/MainLayout";
 
-const SignupPage = lazy(() => import("@/pages/SignupPage"));
-const SigninPage = lazy(() => import("@/pages/SigninPage"));
+const SignupPage = lazy(() => import("@/pages/AuthPage/SignupPage"));
+const SigninPage = lazy(() => import("@/pages/AuthPage/SigninPage"));
 
 const ProfilePage = lazy(() => import("@/pages/ProfilePage/ProfilePage"));
 const ProfileRegisterPage = lazy(() => import("@/pages/ProfileRegisterPage"));

src/layouts/AuthLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 export default function AuthLayout() {
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="min-h-screen flex items-start justify-center pt-[8.75rem] sm:pt-[17.5rem] lg:pt-[19.5rem] ">
       <div className="w-[21.875rem]">
         <Outlet />
       </div>

src/pages/SigninPage.tsx → src/pages/AuthPage/SigninPage.tsx

@@ -1,8 +1,12 @@
+import { useState } from "react";
+
 import { AxiosError } from "axios";
 import { useNavigate, Link } from "react-router-dom";
 
-import Logo from "../assets/logo/thejulge.svg?react";
-import { useAuthForm } from "../hooks/useAuthForm";
+import Logo from "../../assets/logo/thejulge.svg?react";
+
+import Spinner from "./components/Spinner";
+import { useAuthForm } from "./hooks/useAuthForm";
 
 import { postAuthentication } from "@/apis/services/authenticationService";
 import Button from "@/components/Button";
@@ -19,7 +23,12 @@ export default function SigninPage() {
   const { formData, errors, isFormValid, handleChange, resetForm } =
     useAuthForm("signin");
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const handleSubmit = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+
     try {
       const res = await postAuthentication({
         email: formData.email,
@@ -72,13 +81,15 @@ export default function SigninPage() {
           },
         ],
       });
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <div className="w-full">
       <Link to={ROUTES.NOTICE.ROOT}>
-        <Logo className="mx-auto mb-2 h-[2.8125rem] w-[15.5rem]" />
+        <Logo className="mx-auto mb-2 h-[2.375rem] sm:h-[2.8125rem] w-[13rem] sm:w-[15.5rem]" />
       </Link>
 
       <form
@@ -115,11 +126,12 @@ export default function SigninPage() {
         <Button
           type="submit"
           fullWidth
-          className="py-[0.875rem]"
+          className="py-[0.875rem] flex justify-center items-center gap-2"
           onClick={handleSubmit}
-          disabled={!isFormValid}
+          disabled={!isFormValid || isSubmitting}
         >
-          로그인하기
+          {isSubmitting && <Spinner />}
+          {isSubmitting ? "로그인 중..." : "로그인하기"}
         </Button>
       </form>
 

src/pages/SignupPage.tsx → src/pages/AuthPage/SignupPage.tsx

@@ -1,10 +1,14 @@
+import { useState } from "react";
+
 import { AxiosError } from "axios";
 import clsx from "clsx";
 import { useNavigate, Link } from "react-router-dom";
 
-import IconCheck from "../assets/icon/check.svg?react";
-import Logo from "../assets/logo/thejulge.svg?react";
-import { useAuthForm } from "../hooks/useAuthForm";
+import IconCheck from "../../assets/icon/check.svg?react";
+import Logo from "../../assets/logo/thejulge.svg?react";
+
+import Spinner from "./components/Spinner";
+import { useAuthForm } from "./hooks/useAuthForm";
 
 import { postAuthentication } from "@/apis/services/authenticationService";
 import { postUser } from "@/apis/services/userService";
@@ -28,7 +32,12 @@ export default function SignupPage() {
     resetForm,
   } = useAuthForm("signup");
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const handleSubmit = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+
     try {
       const response = await postUser({
         email: formData.email,
@@ -90,13 +99,15 @@ export default function SignupPage() {
           },
         ],
       });
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <div className="w-full">
       <Link to={ROUTES.NOTICE.ROOT}>
-        <Logo className="mx-auto mb-2 h-[2.8125rem] w-[15.5rem]" />
+        <Logo className="mx-auto mb-2 h-[2.375rem] sm:h-[2.8125rem] w-[13rem] sm:w-[15.5rem]" />
       </Link>
 
       <form
@@ -215,10 +226,11 @@ export default function SignupPage() {
         <Button
           type="submit"
           fullWidth
-          className="py-[0.875rem]"
-          disabled={!isFormValid}
+          className="py-[0.875rem] flex justify-center items-center gap-2"
+          disabled={!isFormValid || isSubmitting}
         >
-          가입하기
+          {isSubmitting && <Spinner />}
+          {isSubmitting ? "가입 중..." : "가입하기"}
         </Button>
       </form>
 

src/pages/AuthPage/components/Spinner.tsx

@@ -0,0 +1,5 @@
+export default function Spinner() {
+  return (
+    <div className="w-5 h-5 border-2 border-t-white border-gray-300 rounded-full animate-spin" />
+  );
+}

src/hooks/useAuthForm.ts → src/pages/AuthPage/hooks/useAuthForm.ts

@@ -41,24 +41,34 @@ export function useAuthForm(mode: Mode) {
     (field: keyof FormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value;
       setFormData((prev) => ({ ...prev, [field]: value }));
-
       if (field === "email") {
-        const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
         setErrors((prev) => ({
           ...prev,
-          email: isValidEmail ? undefined : "올바른 이메일 형식이 아닙니다.",
+          email:
+            value.length === 0
+              ? undefined
+              : value.includes("@")
+                ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+                  ? undefined
+                  : "올바른 이메일 형식이 아닙니다."
+                : undefined,
         }));
       }
 
       if (field === "password") {
+        const trimmed = value.trim();
         setErrors((prev) => ({
           ...prev,
           password:
-            value.length >= 8 ? undefined : "비밀번호는 8자 이상이어야 합니다.",
+            value.length > 0 && trimmed.length === 0
+              ? "비밀번호에 공백만 입력할 수 없습니다."
+              : trimmed.length > 0 && trimmed.length < 8
+                ? "비밀번호는 최소 8자 이상이어야 합니다."
+                : undefined,
           ...(mode === "signup" &&
             formData.confirmPassword && {
               confirmPassword:
-                value !== formData.confirmPassword
+                trimmed !== formData.confirmPassword
                   ? "비밀번호가 일치하지 않습니다."
                   : undefined,
             }),