feat: formState로 중복 제출 방지

yourssu · Sep 2, 2024 · 1932b02 · 1932b02
1 parent 0f7e591
commit 1932b02
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/home/components/SignupContents/EmailForm/EmailForm.tsx b/src/home/components/SignupContents/EmailForm/EmailForm.tsx
@@ -1,9 +1,9 @@
 import { BoxButton, PlainButton, SuffixTextField } from '@yourssu/design-system-react';
+import { useForm } from 'react-hook-form';
 
 import { EMAIL_DOMAIN, MAIL_SEARCH_URL } 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,
@@ -21,10 +21,13 @@ import {
 
 export const EmailForm = ({ onConfirm }: EmailFormProps) => {
   const { email, emailError, onEmailSubmit, onChange } = useEmailForm({ onConfirm });
-  const { disabled, handleClick } = usePreventDuplicateClick();
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm();
 
   return (
-    <StyledSignupContentContainer>
+    <StyledSignupContentContainer onSubmit={handleSubmit(onEmailSubmit)}>
       <StyledSignupContentTitle>회원가입</StyledSignupContentTitle>
       <div>
         <StyledTextFieldLabel>숭실대학교 메일을 입력해주세요.</StyledTextFieldLabel>
@@ -55,11 +58,10 @@ export const EmailForm = ({ onConfirm }: EmailFormProps) => {
           size="large"
           variant="filled"
           rounding={8}
-          disabled={email === '' || disabled}
-          onClick={() => handleClick(onEmailSubmit)}
+          disabled={email === '' || isSubmitting}
         >
           <StyledSignupButtonText>
-            {disabled ? '잠시만 기다려주세요...' : '인증 메일 받기'}
+            {isSubmitting ? '잠시만 기다려주세요...' : '인증 메일 받기'}
           </StyledSignupButtonText>
         </BoxButton>
       </StyledButtonsContainer>