[비즈니스] 비밀번호 찾기 인증번호 확인 버튼 추가

src/page/Auth/FindPassword/ChangePassword/index.tsx

@@ -30,7 +30,7 @@ export default function ChangePassword() {
       <section className={styles.section}>
         <div className={styles.title}>새 비밀번호</div>
         <input
-          className={styles.input}
+          className={styles['password-input']}
           type="password"
           placeholder="새 비밀번호를 입력해주세요."
           {...register('password', {
@@ -62,7 +62,7 @@ export default function ChangePassword() {
       <section className={styles.section}>
         <div className={styles.title}>새 비밀번호 확인</div>
         <input
-          className={styles.input}
+          className={styles['password-input']}
           type="password"
           placeholder="새 비밀번호를 다시 입력해주세요."
           {...register('passwordCheck', {

src/page/Auth/FindPassword/Verify/index.tsx

@@ -1,8 +1,7 @@
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { sendVerifyCode, verifyCode } from 'api/auth';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
-  UseFormClearErrors,
   useFormContext, UseFormGetValues, UseFormSetError,
 } from 'react-hook-form';
 import { useOutletContext } from 'react-router-dom';
@@ -11,6 +10,7 @@ import { ReactComponent as Warning } from 'assets/svg/auth/warning.svg';
 import styles from 'page/Auth/FindPassword/index.module.scss';
 import { OutletProps } from 'page/Auth/FindPassword/entity';
 import { useDebounce } from 'utils/hooks/useDebounce';
+import showToast from 'utils/ts/showToast';
 
 interface SendCode {
   getValues: UseFormGetValues<Verify>;
@@ -27,59 +27,17 @@ const code = (
   }: SendCode,
 ) => {
   sendVerifyCode(getValues('phone_number'))
-    .then(() => setIsSent(true))
+    .then(() => {
+      setIsSent(true);
+      showToast('success', '인증번호를 발송했습니다');
+    })
     .catch((e) => {
       if (isKoinError(e)) {
         setError('phone_number', { type: 'custom', message: e.message });
       }
     });
 };
 
-const useCheckCode = (
-  setIsStepComplete: React.Dispatch<React.SetStateAction<boolean>>,
-  getValues: UseFormGetValues<Verify>,
-  setError: UseFormSetError<Verify>,
-  clearErrors: UseFormClearErrors<Verify>,
-) => {
-  const [certificationCode, setCertificationCode] = useState<string>('');
-  const [isCertified, setIsCertified] = useState<boolean>(false);
-
-  const setCode = (e: ChangeEvent<HTMLInputElement>) => {
-    setCertificationCode(e.target.value);
-    if (e.target.value.length < 6) {
-      setError('certification_code', { message: '필수 입력 항목입니다.' });
-      setIsCertified(false);
-      setIsStepComplete(false);
-      return;
-    }
-    clearErrors();
-  };
-
-  useEffect(() => {
-    if (certificationCode.length === 6) {
-      verifyCode({
-        certification_code: certificationCode,
-        phone_number: getValues('phone_number'),
-      }).then((data) => {
-        setIsStepComplete(true);
-        setIsCertified(true);
-        clearErrors();
-        sessionStorage.setItem('accessToken', data.data.token);
-      })
-        .catch((e) => {
-          if (isKoinError(e)) {
-            setError('certification_code', { type: 'error', message: e.message });
-          } else {
-            sendClientError(e);
-          }
-          setIsStepComplete(false);
-        });
-    }
-  }, [certificationCode, setIsStepComplete, getValues, setError, clearErrors]);
-
-  return { certificationCode, setCode, isCertified };
-};
-
 interface Verify {
   phone_number: string;
   certification_code: string;
@@ -91,43 +49,78 @@ export default function Verify() {
   } = useFormContext<Verify>();
 
   const [isSent, setIsSent] = useState(false);
+  const [isCertified, setIsCertified] = useState(false);
   const debounce = useDebounce<SendCode>(code, { getValues, setError, setIsSent });
   const steps = useOutletContext<OutletProps>();
 
-  const { setCode, isCertified } = useCheckCode(
-    steps.setIsStepComplete,
-    getValues,
-    setError,
-    clearErrors,
-  );
-
   const sendCode = () => {
     if (getValues('phone_number').length === 0) {
       setError('phone_number', { type: 'custom', message: '필수 입력 항목입니다.' });
       return;
     }
     debounce();
+    clearErrors();
   };
 
+  const verify = () => verifyCode({
+    certification_code: getValues('certification_code'),
+    phone_number: getValues('phone_number'),
+  }).then((data) => {
+    steps.setIsStepComplete(true);
+    setIsCertified(true);
+    clearErrors();
+    sessionStorage.setItem('accessToken', data.data.token);
+  })
+    .catch((e) => {
+      if (isKoinError(e)) {
+        setError('certification_code', { type: 'error', message: e.message });
+      } else {
+        sendClientError(e);
+      }
+      setIsCertified(false);
+      steps.setIsStepComplete(false);
+    });
+
+  useEffect(() => {
+    if (errors.certification_code || errors.phone_number) {
+      steps.setIsStepComplete(false);
+      setIsCertified(false);
+    }
+  }, [errors, steps]);
+
   return (
     <form className={styles.container}>
       <section className={styles.section}>
         <div className={styles.title}>휴대폰 번호</div>
-        <input
-          className={styles.input}
-          {...register('phone_number', {
-            required: {
-              value: true,
-              message: '필수 입력 항목입니다.',
-            },
-            maxLength: {
-              value: 11,
-              message: '11자리의 숫자로 입력해주세요',
-            },
-          })}
-          type="text"
-          placeholder="-없이 번호를 입력해주세요."
-        />
+        <div className={styles.verify}>
+          <input
+            className={styles.input}
+            {...register('phone_number', {
+              required: {
+                value: true,
+                message: '필수 입력 항목입니다.',
+              },
+              minLength: {
+                value: 11,
+                message: '11자리의 숫자로 입력해주세요',
+              },
+            })}
+            maxLength={11}
+            type="text"
+            placeholder="-없이 번호를 입력해주세요."
+          />
+          <button
+            className={cn({
+              [styles.button]: true,
+              [styles['button--active']]: watch('phone_number') && watch('phone_number').length === 11,
+              [styles['button--error']]: !!errors.certification_code,
+            })}
+            type="button"
+            onClick={sendCode}
+          >
+            {isSent ? '인증번호 재발송' : '인증번호 발송'}
+          </button>
+        </div>
         {errors.phone_number
           && (
             <div className={styles.error}>
@@ -140,23 +133,31 @@ export default function Verify() {
         <div className={styles.title}>인증번호</div>
         <div className={styles.verify}>
           <input
-            className={styles['input--verify']}
-            {...register('certification_code')}
+            className={styles.input}
+            {...register('certification_code', {
+              required: {
+                value: true,
+                message: '인증번호를 입력해주세요',
+              },
+              minLength: {
+                value: 6,
+                message: '6자리의 인증번호를 입력해주세요',
+              },
+            })}
             type="text"
             placeholder="인증번호를 입력해주세요."
             maxLength={6}
-            onChange={setCode}
           />
           <button
             className={cn({
-              [styles.button]: true || isCertified,
+              [styles.button]: true,
               [styles['button--active']]: watch('phone_number') && watch('phone_number').length === 11,
               [styles['button--error']]: !!errors.certification_code,
             })}
             type="button"
-            onClick={sendCode}
+            onClick={verify}
           >
-            {isSent ? '인증번호 재발송' : '인증번호 발송'}
+            인증번호 확인
           </button>
         </div>
         {
@@ -168,7 +169,7 @@ export default function Verify() {
           )
         }
         {
-          isCertified && (
+          isCertified && watch('certification_code').length === 6 && (
             <div className={styles.error}>
               인증되었습니다
             </div>

src/page/Auth/FindPassword/index.module.scss

@@ -26,23 +26,25 @@
   height: 50px;
   padding: 2px 10px;
   box-sizing: border-box;
+  width: 55%;
+}
 
-  &--verify {
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    border: none;
-    height: 50px;
-    padding: 2px 10px;
-    box-sizing: border-box;
-    width: 55%;
-  }
+.password-input {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  border: none;
+  height: 50px;
+  padding: 2px 10px;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .button {
   background-color: #eeeeee;
   border-radius: 4px;
   height: 50px;
   width: 40%;
+  cursor: pointer;
 
   &--active {
     background-color: #175c8e;