[비즈니스] 비즈니스팀 QA 반영 (#371)

* fix: 로그인 에러 메시지 수정 * refactor: 계좌번호의 하이픈을 필수 값에서 제외 * fix: 로그인 바로가기 버튼 높이 조정 * fix: 인증성공시 input disable 삭제 및 인증문구 추가 * fix: 다음 버튼이 이용약관을 가리는 현상 수정 * fix: lint 에러 수정 * refactor: 계좌번호 placeholder 변경
BCSDLab · Jul 8, 2024 · 520b3cf · 520b3cf
1 parent 49d5120
commit 520b3cf
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 21 deletions.
diff --git a/src/page/Auth/FindPassword/Verify/index.tsx b/src/page/Auth/FindPassword/Verify/index.tsx
@@ -44,6 +44,17 @@ const useCheckCode = (
   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({
@@ -66,7 +77,7 @@ const useCheckCode = (
     }
   }, [certificationCode, setIsStepComplete, getValues, setError, clearErrors]);
 
-  return { setCertificationCode, isCertified };
+  return { certificationCode, setCode, isCertified };
 };
 
 interface Verify {
@@ -83,7 +94,7 @@ export default function Verify() {
   const debounce = useDebounce<SendCode>(code, { getValues, setError, setIsSent });
   const steps = useOutletContext<OutletProps>();
 
-  const { setCertificationCode, isCertified } = useCheckCode(
+  const { setCode, isCertified } = useCheckCode(
     steps.setIsStepComplete,
     getValues,
     setError,
@@ -98,8 +109,6 @@ export default function Verify() {
     debounce();
   };
 
-  const setCode = (e: ChangeEvent<HTMLInputElement>) => setCertificationCode(e.target.value);
-
   return (
     <form className={styles.container}>
       <section className={styles.section}>
@@ -111,12 +120,14 @@ export default function Verify() {
               value: true,
               message: '필수 입력 항목입니다.',
             },
-            maxLength: 11,
+            maxLength: {
+              value: 11,
+              message: '11자리의 숫자로 입력해주세요',
+            },
           })}
           type="text"
           placeholder="-없이 번호를 입력해주세요."
         />
-
         {errors.phone_number
           && (
             <div className={styles.error}>
@@ -135,17 +146,15 @@ export default function Verify() {
             placeholder="인증번호를 입력해주세요."
             maxLength={6}
             onChange={setCode}
-            disabled={isCertified}
           />
           <button
             className={cn({
-              [styles.button]: true,
+              [styles.button]: true || isCertified,
               [styles['button--active']]: watch('phone_number') && watch('phone_number').length === 11,
               [styles['button--error']]: !!errors.certification_code,
             })}
             type="button"
             onClick={sendCode}
-            disabled={isCertified}
           >
             {isSent ? '인증번호 재발송' : '인증번호 발송'}
           </button>
@@ -158,6 +167,13 @@ export default function Verify() {
             </div>
           )
         }
+        {
+          isCertified && (
+            <div className={styles.error}>
+              인증되었습니다
+            </div>
+          )
+        }
       </section>
     </form>
   );

diff --git a/src/page/Auth/Signup/components/agreeStep/agreeStep.module.scss b/src/page/Auth/Signup/components/agreeStep/agreeStep.module.scss
@@ -1,7 +1,18 @@
+@use "src/utils/styles/mediaQuery" as media;
+
 .id-input {
   font-size: 12px;
 }
 
+.step-one {
+  height: 100%;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .agree-all {
   border-radius: 5px;
   background: #f5f5f5;
@@ -26,6 +37,11 @@
 
 .personal {
   margin-top: 4px;
+  height: 28vh;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 30vh;
+  }
 
   &__button {
     display: flex;
@@ -41,12 +57,17 @@
     border: 1px dashed #d2dae2;
     padding: 12px;
     height: 20vh;
-    overflow: scroll;
+    overflow-y: scroll;
   }
 }
 
 .koin {
   margin-top: 4px;
+  height: 28vh;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 30vh;
+  }
 
   &__button {
     display: flex;
@@ -61,7 +82,6 @@
     margin-top: 5px;
     border: 1px dashed #d2dae2;
     padding: 12px;
-    height: 20vh;
-    overflow: scroll;
+    overflow-y: scroll;
   }
 }
diff --git a/src/page/Auth/components/Common/index.module.scss b/src/page/Auth/components/Common/index.module.scss
@@ -64,7 +64,14 @@
 }
 
 .content {
-  height: calc(100vh - 40vh);
+  height: calc(100vh - 35vh);
+  box-sizing: border-box;
+  padding: 5px 0;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   @include media.media-breakpoint-down(mobile) {
     height: calc(100vh - 28vh);

diff --git a/src/page/Auth/components/Done/index.module.scss b/src/page/Auth/components/Done/index.module.scss
@@ -28,8 +28,12 @@
 .button {
   width: 100%;
   background-color: #175c8e;
-  height: 50px;
+  height: 100px;
   border-radius: 4px;
   font-weight: 600;
   color: white;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 50px;
+  }
 }
diff --git a/src/page/MyShopPage/components/BankList/index.tsx b/src/page/MyShopPage/components/BankList/index.tsx
@@ -12,12 +12,14 @@ interface Props {
   bankName: string | null;
   account_number: string | null;
 }
+
+const NUMBER_REGEX = /^[0-9-]+$/;
 export default function BankList({
   close, register, setValue, bankName, account_number,
 }: Props) {
   const validation = () => {
-    if (account_number && !account_number.includes('-')) {
-      showToast('error', '-을 포함한 계좌번호를 입력해주세요');
+    if (account_number && !NUMBER_REGEX.test(account_number)) {
+      showToast('error', '올바른 양식의 계좌번호를 입력해주세요');
       return;
     }
     if ((bankName && !account_number) || (!bankName && account_number)) {
@@ -27,15 +29,15 @@ export default function BankList({
     close();
   };
   return (
-    <div className={styles.overlay}>
-      <div className={styles.modal}>
+    <div className={styles.overlay} onClick={validation} role="button" aria-hidden>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()} role="button" aria-hidden>
         <label htmlFor="account" className={styles.top}>
           <div className={styles.top__account}>계좌번호</div>
           <input
             id="account"
             className={styles.top__input}
             {...register('account_number')}
-            placeholder="-을 포함한 계좌번호를 입력해주세요"
+            placeholder="계좌번호를 입력해주세요"
           />
         </label>
         <hr className={styles.modal__divide} />

diff --git a/src/query/auth.ts b/src/query/auth.ts
@@ -56,7 +56,7 @@ export const useLogin = () => {
         sessionStorage.removeItem('access_token');
         localStorage.removeItem('refresh_token');
         if (err.status === 400) {
-          setLoginError('아이디 혹은 비밀번호가 일치하지 않습니다.');
+          setLoginError(err.message);
           return;
         }
         if (err.status === 403) {
@@ -65,7 +65,7 @@ export const useLogin = () => {
           return;
         }
         if (err.status === 404) {
-          setLoginError('가입되지 않은 이메일입니다.');
+          setLoginError('가입되지 않은 전화번호입니다.');
           return;
         }
         if (err.status === 500) {