refactor: 캡챠 입력 값 초기화

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 (
     <Modal
@@ -53,9 +59,10 @@ export const ApplyCaptchaModal = ({
       ) : (
         <CaptchaForm
           codeInput={input}
+          onClearInput={onClearInput}
           handleCodeInput={handleInput}
           captchaImageUrl={captchaImageUrl}
-          handleSubmit={handleSubmit}
+          onSubmit={handleSubmit}
         />
       )}
     </Modal>

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<HTMLInputElement>;
   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 (
     <div>
       <Txt size="h3" className="block text-center pb-4">
@@ -29,28 +38,30 @@ export const CaptchaForm = ({
         두 정수의 덧/뺄셈(+,-)결과를 입력해주세요.
       </Txt>
       <img className="m-auto" src={`https://${captchaImageUrl}`} />
-      <div className="w-full flex justify-center align-center py-4">
-        <InputText
-          type="text"
-          value={codeInput}
-          onChange={handleCodeInput}
-          placeholder="정답"
-          className="w-full max-w-lg text-center"
-        />
-      </div>
-      <div className="flex justify-center align-center pt-4 gap-4">
-        <Button size="small" color="secondary" onClick={refetchCaptcha}>
-          새로고침
-        </Button>
-        <Button
-          onClick={handleSubmit}
-          color="primary"
-          size="small"
-          className="px-8"
-        >
-          확인
-        </Button>
-      </div>
+      <form onSubmit={onSubmit}>
+        <div className="w-full flex justify-center align-center py-4">
+          <InputText
+            type="text"
+            value={codeInput}
+            onChange={handleCodeInput}
+            placeholder="정답"
+            className="w-full max-w-lg text-center"
+          />
+        </div>
+        <div className="flex justify-center align-center pt-4 gap-4">
+          <Button
+            size="small"
+            color="secondary"
+            type="button"
+            onClick={refetchCaptcha}
+          >
+            새로고침
+          </Button>
+          <Button color="primary" size="small" className="px-8" type="submit">
+            확인
+          </Button>
+        </div>
+      </form>
     </div>
   );
 };

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