아이디찾기, 비밀번호 찾기 에러 수정

src/components/account/find/AccountFindPassword.js

@@ -56,11 +56,21 @@ export const AccountFindPassword =  props => {
   }, []);
 
   const handlerSend = async() => {
-    if(!inputId || !inputHpno) {
+    if(!inputId) {
       setModal({
         isOpen: true,
         title: '인증번호 발송',
-        desc: '빈칸을 채워주세요.',
+        desc: '아이디를 입력해 주세요.',
+        color: 'modal-danger'
+      })
+      return;
+    }
+
+    if(!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
         color: 'modal-danger'
       })
       return;
@@ -126,6 +136,12 @@ export const AccountFindPassword =  props => {
         setIsRunning(false);
         // setValue('crtfyNo', '');
         // setCrtfyNo('');
+        setModal({
+          isOpen: true,
+          title: '인증번호 만료',
+          desc: '인증번호가 만료되었습니다.',
+          color: 'modal-danger'
+        })
       }
     }, 1000);
 
@@ -137,11 +153,21 @@ export const AccountFindPassword =  props => {
   }
 
   const handlerConfirm = async() => {
-    if(!inputId || !inputHpno) {
+    if(!inputId) {
       setModal({
         isOpen: true,
-        title: '인증번호 인증',
+        title: '인증번호 발송',
-        desc: '빈칸을 채워주세요.',
+        desc: '아이디를 입력해 주세요.',
+        color: 'modal-danger'
+      })
+      return;
+    }
+
+    if(!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
         color: 'modal-danger'
       })
       return;
@@ -183,7 +209,7 @@ export const AccountFindPassword =  props => {
       setModal({
         isOpen: true,
         title: '비밀번호 변경',
-        desc: '빈칸을 채워주세요.',
+        desc: '비밀번호를 입력해 주세요.',
         color: 'modal-danger'
       })
       return;
@@ -194,7 +220,7 @@ export const AccountFindPassword =  props => {
       setModal({
         isOpen: true,
         title: '비밀번호 변경',
-        desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.',
+        desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
         color: 'modal-danger'
       })
       return;
@@ -242,12 +268,17 @@ export const AccountFindPassword =  props => {
         setInputCrtfy(crtfyhp)
       }
     } else if(name == 'newPw') {
+      const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
+      if(regex.test(value)) {
         newpw = value;
         setInputNewPw(newpw);
-      // }
+      }
     } else if(name == 'newPwCk') {
+      const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
+      if(regex.test(value)) {
         newpwck = value;
         setInputNewPwCk(newpwck);
+      }
     }
   }
 

src/components/account/find/AccountFindUserId.js

@@ -52,11 +52,21 @@ export const AccountFindUserId =  props  => {
   }, []);
 
   const handlerSend = async() => {
-    if(!inputName || !inputHpno) {
+    if(!inputName) {
       setModal({
         isOpen: true,
         title: '인증번호 발송',
-        desc: '빈칸을 채워주세요.',
+        desc: '이름을 입력해 주세요.',
+        color: 'modal-danger'
+      })
+      return;
+    }
+
+    if(!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
         color: 'modal-danger'
       })
       return;
@@ -121,6 +131,12 @@ export const AccountFindUserId =  props  => {
         setIsRunning(false);
         // setValue('crtfyNo', '');
         // setCrtfyNo('');
+        setModal({
+          isOpen: true,
+          title: '인증번호 만료',
+          desc: '인증번호가 만료되었습니다.',
+          color: 'modal-danger'
+        })
       }
     }, 1000);
 
@@ -132,11 +148,21 @@ export const AccountFindUserId =  props  => {
   }
 
   const handlerConfirm = async() => {
-    if(!inputName || !inputHpno) {
+    if(!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '휴대폰 번호를 입력 해주세요.',
+        color: 'modal-danger'
+      })
+      return;
+    }
+
+    if(!inputName) {
       setModal({
         isOpen: true,
         title: '인증번호 인증',
-        desc: '빈칸을 채워주세요.',
+        desc: '이름을 입력 해주세요.',
         color: 'modal-danger'
       })
       return;

src/containers/account/find/AccounFindTabContainer.js

@@ -1,10 +1,15 @@
 import { AccountFindTab } from "../../../components/account/find/AccountFindTab";
-
 import loginImg from '../../../assets/images/login01.png';
-
+import { Button } from 'reactstrap'
 import '../../../assets/css/custom.css';
+import { useHistory } from 'react-router-dom'
 
 export const AccountFindTabContainer = () => {
+  const history = useHistory();
+
+  const handlerRegister = () => {
+    history.push(`/account/register`)
+  }
 
   return (
     <>
@@ -17,6 +22,14 @@ export const AccountFindTabContainer = () => {
           <div className='pal-card'>
             <AccountFindTab  />
           </div>
+          <div className='user-search-link'>
+            <Button.Ripple
+              color='flat-warning'
+              onClick={handlerRegister}
+            >
+              회원가입 바로가기
+            </Button.Ripple>
+          </div>
         </div>
       </div>
     </>