diff --git a/service-apply/src/components/apply/ApplyCaptchaModal.tsx b/service-apply/src/components/apply/ApplyCaptchaModal.tsx index 8190ffd..291e536 100644 --- a/service-apply/src/components/apply/ApplyCaptchaModal.tsx +++ b/service-apply/src/components/apply/ApplyCaptchaModal.tsx @@ -14,10 +14,16 @@ export const ApplyCaptchaModal = ({ onRequestClose, safeClose, }: ApplyCaptchaModalProps) => { - const { isLoading, input, handleInput, captchaImageUrl, handleSubmit } = - useCaptchaForm({ - closeModal: onRequestClose, - }); + const { + isLoading, + onClearInput, + input, + handleInput, + captchaImageUrl, + handleSubmit, + } = useCaptchaForm({ + closeModal: onRequestClose, + }); return ( )} diff --git a/service-apply/src/components/apply/CaptchaForm.tsx b/service-apply/src/components/apply/CaptchaForm.tsx index e4b5cf0..5b364ae 100644 --- a/service-apply/src/components/apply/CaptchaForm.tsx +++ b/service-apply/src/components/apply/CaptchaForm.tsx @@ -1,25 +1,34 @@ -import { ChangeEventHandler } from 'react'; +import { ChangeEventHandler, useEffect } from 'react'; import { Txt, InputText, Button } from '@quokka/design-system'; import { useQueryClient } from '@tanstack/react-query'; interface CaptchaFormProps { codeInput: string; + onClearInput: () => void; handleCodeInput: ChangeEventHandler; captchaImageUrl: string; - handleSubmit: () => void; + onSubmit: () => void; } export const CaptchaForm = ({ codeInput, + onClearInput, handleCodeInput, captchaImageUrl, - handleSubmit, + onSubmit, }: CaptchaFormProps) => { const queryClient = useQueryClient(); const refetchCaptcha = () => { // TODO: 쿼리키 상수화 queryClient.refetchQueries({ queryKey: ['captcha'] }); }; + + useEffect(() => { + return () => { + onClearInput(); + }; + }, []); + return (
@@ -29,28 +38,30 @@ export const CaptchaForm = ({ 두 정수의 덧/뺄셈(+,-)결과를 입력해주세요. -
- -
-
- - -
+
+
+ +
+
+ + +
+
); }; diff --git a/service-apply/src/hooks/apply/useCaptchaForm.tsx b/service-apply/src/hooks/apply/useCaptchaForm.tsx index e182ed0..05ccd56 100644 --- a/service-apply/src/hooks/apply/useCaptchaForm.tsx +++ b/service-apply/src/hooks/apply/useCaptchaForm.tsx @@ -22,6 +22,10 @@ export const useCaptchaForm = ({ closeModal }: { closeModal: () => void }) => { setInput(e.target.value.replace(/[^-0-9]/g, '')); }; + const onClearInput = () => { + setInput(''); + }; + const handleSubmit = () => { setIsLoading(true); if (postRegistrationStatus == 'pending') return; @@ -40,6 +44,8 @@ export const useCaptchaForm = ({ closeModal }: { closeModal: () => void }) => { }), { onError: (error) => { + setInput(''); + alert(error.message); setIsLoading(false); throw new Error(error.message); @@ -56,5 +62,12 @@ export const useCaptchaForm = ({ closeModal }: { closeModal: () => void }) => { ); }; - return { isLoading, input, handleInput, captchaImageUrl, handleSubmit }; + return { + isLoading, + onClearInput, + input, + handleInput, + captchaImageUrl, + handleSubmit, + }; };