fix: 로그인 버튼 연속 클릭 방지 및 텍스트 조건부로 추가

Author: GamjaIsMine02

components/auth/Button.tsx

@@ -7,6 +7,7 @@ type ButtonProps = {
   className?: string;
   type?: 'button' | 'submit';
   onClick?: () => void;
+  disabled?: boolean;
 };
 
 const Button = ({
@@ -15,11 +16,13 @@ const Button = ({
   className,
   type = 'button',
   onClick,
+  disabled,
 }: ButtonProps) => {
   return (
     <button
       type={type}
       onClick={onClick}
+      disabled={disabled}
       className={clsx(
         'h-12 w-full cursor-pointer rounded-lg text-base font-medium transition-all duration-150 active:scale-[0.98]',
 

components/auth/LoginForm.tsx

@@ -22,6 +22,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const router = useRouter();
 
@@ -48,9 +49,13 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
     e.preventDefault();
     setError('');
 
+    if (isLoading) return;
+    setIsLoading(true);
+
     // 유효성 검사
     if (!email || !password) {
       setError('이메일과 비밀번호를 모두 입력해주세요.');
+      setIsLoading(false);
       return;
     }
 
@@ -65,6 +70,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
     } catch (err) {
       console.error('로그인 에러:', err);
       setError('이메일 또는 비밀번호가 잘못되었습니다.');
+      setIsLoading(false);
     }
   };
 
@@ -99,7 +105,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
         비밀번호를 잊으셨나요?
       </button>
       <Button className="mt-6" type="submit">
-        이메일로 로그인하기
+        {isLoading ? '로그인 중...' : '이메일로 로그인하기'}
       </Button>
 
       <p className="text-text-sub mt-4 text-center text-sm">
@@ -117,7 +123,12 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
         <div className="bg-border h-px flex-1" />
       </div>
 
-      <Button variant="github" onClick={handleGithubLogin} type="button">
+      <Button
+        variant="github"
+        onClick={handleGithubLogin}
+        type="button"
+        disabled={isLoading}
+      >
         <FaGithub className="text-xl" />
         <span>Github로 로그인</span>
       </Button>