fix: 회원 가입 중복 호출 방지

src/home/components/SignupContents/EmailForm/EmailForm.tsx

@@ -3,6 +3,7 @@ import { BoxButton, PlainButton, SuffixTextField } from '@yourssu/design-system-
 import { EMAIL_DOMAIN } from '@/constants/email.constant';
 import { EmailFormProps } from '@/home/components/SignupContents/EmailForm/EmailForm.type.ts';
 import { useEmailForm } from '@/home/components/SignupContents/EmailForm/useEmailForm.ts';
+import { usePreventDuplicateClick } from '@/hooks/usePreventDuplicateClick.ts';
 
 import {
   StyledSignupButtonText,
@@ -18,7 +19,8 @@ import {
 } from './EmailForm.style';
 
 export const EmailForm = ({ onConfirm }: EmailFormProps) => {
-  const { email, emailSending, emailError, onEmailSubmit, onChange } = useEmailForm({ onConfirm });
+  const { email, emailError, onEmailSubmit, onChange } = useEmailForm({ onConfirm });
+  const { disabled, handleClick } = usePreventDuplicateClick();
 
   return (
     <StyledSignupContentContainer>
@@ -47,8 +49,8 @@ export const EmailForm = ({ onConfirm }: EmailFormProps) => {
           size="large"
           variant="filled"
           rounding={8}
-          disabled={email === '' || emailSending}
-          onClick={onEmailSubmit}
+          disabled={email === '' || disabled}
+          onClick={() => handleClick(onEmailSubmit)}
         >
           <StyledSignupButtonText>인증 메일 받기</StyledSignupButtonText>
         </BoxButton>

src/home/components/SignupContents/EmailForm/useEmailForm.ts

@@ -7,25 +7,20 @@ import { useFullEmail } from '@/hooks/useFullEmail';
 export const useEmailForm = ({ onConfirm }: EmailFormProps) => {
   const [email, setEmail] = useState('');
   const [emailError, setEmailError] = useState<string | undefined>(undefined);
-  const [emailSending, setEmailSending] = useState(false);
   const fullEmail = useFullEmail(email);
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
 
   const onEmailSubmit = async () => {
-    setEmailSending(true);
-
     const res = await postAuthVerificationEmail({ email: fullEmail, verificationType: 'SIGN_UP' });
     if (res.data) {
       onConfirm(fullEmail);
     } else {
       setEmailError(res.error?.response?.data.message || '이메일을 다시 확인해주세요.');
     }
-
-    setEmailSending(false);
   };
 
-  return { email, emailError, emailSending, onChange, onEmailSubmit };
+  return { email, emailError, onChange, onEmailSubmit };
 };

src/home/components/SignupContents/SignupForm/SignupForm.tsx

@@ -2,6 +2,7 @@ import { BoxButton, PasswordTextField, SimpleTextField } from '@yourssu/design-s
 
 import { SignupFormProps } from '@/home/components/SignupContents/SignupForm/SignUpForm.type.ts';
 import { useSignUpForm } from '@/home/components/SignupContents/SignupForm/useSignUpForm.ts';
+import { usePreventDuplicateClick } from '@/hooks/usePreventDuplicateClick.ts';
 import { useSignupFormValidation } from '@/hooks/useSignupFormValidator.ts';
 
 import {
@@ -19,6 +20,8 @@ export const SignupForm = ({ email, onConfirm }: SignupFormProps) => {
   const { nicknameValidOnce, passwordValidOnce, isFormValid, isNicknameValid, isPasswordValid } =
     useSignupFormValidation(nickname, password);
 
+  const { disabled, handleClick } = usePreventDuplicateClick();
+
   return (
     <StyledSignupContentContainer>
       <StyledSignupContentTitle>회원가입</StyledSignupContentTitle>
@@ -51,8 +54,8 @@ export const SignupForm = ({ email, onConfirm }: SignupFormProps) => {
         rounding={8}
         size="large"
         variant="filled"
-        onClick={onFormConfirm}
-        disabled={!isFormValid}
+        onClick={() => handleClick(onFormConfirm)}
+        disabled={!isFormValid || disabled}
       >
         <StyledSignupButtonText>회원가입</StyledSignupButtonText>
       </BoxButton>

src/hooks/usePreventDuplicateClick.ts

@@ -0,0 +1,20 @@
+import { useCallback, useRef, useState } from 'react';
+
+export const usePreventDuplicateClick = () => {
+  const [disabled, setDisabled] = useState(false);
+  const loadingRef = useRef(false);
+
+  const handleClick = useCallback(async (callback: () => Promise<void>) => {
+    if (loadingRef.current) return;
+
+    loadingRef.current = true;
+    setDisabled(true);
+
+    await callback();
+
+    loadingRef.current = false;
+    setDisabled(false);
+  }, []);
+
+  return { disabled, handleClick };
+};