From b3e7f7d52a54201ea3f66e4b01d0d832a8ea149e Mon Sep 17 00:00:00 2001
From: jonique98 <tnals9899@naver.com>
Date: Mon, 2 Sep 2024 20:35:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20formState=EB=A1=9C=20=EC=A4=91=EB=B3=B5?=
 =?UTF-8?q?=20=EC=A0=9C=EC=B6=9C=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SignupContents/EmailForm/EmailForm.tsx         | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/home/components/SignupContents/EmailForm/EmailForm.tsx b/src/home/components/SignupContents/EmailForm/EmailForm.tsx
index 78e13bfa..5a981ad2 100644
--- 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>