From 60ff32a8a36e93efb158872e4aec332f4a0e2fde Mon Sep 17 00:00:00 2001
From: chaeseungyun <thslr57@naver.com>
Date: Tue, 9 Jul 2024 09:29:17 +0900
Subject: [PATCH 1/3] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20scss=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FindPassword/Verify/index.module.scss     | 75 -------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 src/page/Auth/FindPassword/Verify/index.module.scss

diff --git a/src/page/Auth/FindPassword/Verify/index.module.scss b/src/page/Auth/FindPassword/Verify/index.module.scss
deleted file mode 100644
index f214a248..00000000
--- a/src/page/Auth/FindPassword/Verify/index.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.container {
-  height: calc(100vh - 30vh);
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 25px;
-}
-
-.title {
-  font-weight: bold;
-}
-
-.verify {
-  display: flex;
-  justify-content: space-between;
-}
-
-.input {
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  border: none;
-  height: 50px;
-  padding: 2px 10px;
-  box-sizing: border-box;
-
-  &--verify {
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    border: none;
-    height: 50px;
-    padding: 2px 10px;
-    box-sizing: border-box;
-    width: 55%;
-  }
-}
-
-.button {
-  background-color: #eeeeee;
-  border-radius: 4px;
-  height: 50px;
-  width: 40%;
-
-  &--active {
-    background-color: #175c8e;
-    color: white;
-    border-radius: 4px;
-    height: 50px;
-    width: 40%;
-  }
-
-  &--error {
-    background-color: #f7941e;
-    color: white;
-    border-radius: 4px;
-    height: 50px;
-    width: 40%;
-  }
-}
-
-.error {
-  color: #f7941e;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.comment {
-  color: #cacaca;
-  font-size: 11px;
-}

From 90f836b0e215fceab901520c04d3ce5121ca0953 Mon Sep 17 00:00:00 2001
From: chaeseungyun <thslr57@naver.com>
Date: Tue, 9 Jul 2024 09:29:38 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20input=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FindPassword/ChangePassword/index.tsx     |  4 ++--
 src/page/Auth/FindPassword/index.module.scss  | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/page/Auth/FindPassword/ChangePassword/index.tsx b/src/page/Auth/FindPassword/ChangePassword/index.tsx
index a84753b6..dc2de23f 100644
--- a/src/page/Auth/FindPassword/ChangePassword/index.tsx
+++ b/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', {
diff --git a/src/page/Auth/FindPassword/index.module.scss b/src/page/Auth/FindPassword/index.module.scss
index f214a248..eb995044 100644
--- a/src/page/Auth/FindPassword/index.module.scss
+++ b/src/page/Auth/FindPassword/index.module.scss
@@ -26,16 +26,17 @@
   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 {
@@ -43,6 +44,7 @@
   border-radius: 4px;
   height: 50px;
   width: 40%;
+  cursor: pointer;
 
   &--active {
     background-color: #175c8e;

From a1019f66a4250770caa96dec799e9897dbffab1d Mon Sep 17 00:00:00 2001
From: chaeseungyun <thslr57@naver.com>
Date: Tue, 9 Jul 2024 09:30:03 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=9D=B8=EC=A6=9D=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=A0=84=EC=86=A1=20=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/FindPassword/Verify/index.tsx | 155 ++++++++++----------
 1 file changed, 78 insertions(+), 77 deletions(-)

diff --git a/src/page/Auth/FindPassword/Verify/index.tsx b/src/page/Auth/FindPassword/Verify/index.tsx
index 8240b0c9..c108d71f 100644
--- a/src/page/Auth/FindPassword/Verify/index.tsx
+++ b/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,7 +27,10 @@ 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 });
@@ -35,51 +38,6 @@ const code = (
     });
 };
 
-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>