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,
+ };
};