비밀번호찾기 코드 정렬

src/components/account/find/AccountFindPassword.js

@@ -1,39 +1,45 @@
-import * as yup from 'yup';
+import { useState, useEffect } from 'react';
-import classnames from 'classnames';
+import { useSelector, useDispatch } from 'react-redux';
-import { useState, useEffect } from 'react'
+import {
-import { useParams, Link } from 'react-router-dom'
+  InputGroup,
-import { useSelector, useDispatch } from 'react-redux'
+  InputGroupAddon,
-import { useForm } from 'react-hook-form';
+  InputGroupText,
-import { yupResolver } from '@hookform/resolvers/yup';
+  Col,
-
+  TabPane,
-import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  FormGroup,
-  Modal, ModalHeader, ModalBody, ModalFooter, FormFeedback  } from 'reactstrap'
+  Input,
-  import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+  Button,
-
+  Modal,
-import loginImg from '../../../assets/images/login01.png';
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+import { User, Lock } from 'react-feather';
 import '../../../assets/css/custom.css';
-import { findAPI } from '../../../modules/account/find/apis/findApi'
+import { findAPI } from '../../../modules/account/find/apis/findApi';
-import { accountApi } from '../../../modules/account/register/apis/accountApi'
+import { accountApi } from '../../../modules/account/register/apis/accountApi';
 import { updatePwAction } from '../../../modules/account/find/actions/findAction';
 
 export const AccountFindPassword = props => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('2')
+  const [activeTab, setActiveTab] = useState('2');
 
   // ** Function to toggle tabs
-  const toggle = tab => setActiveTab(tab)
+  const toggle = tab => setActiveTab(tab);
   //modal
-  const [confirmModal, setConfirmModal] = useState(false)
+  const [confirmModal, setConfirmModal] = useState(false);
-  const [saveModal, setSaveModal] = useState(false)
+  const [saveModal, setSaveModal] = useState(false);
   const [modal, setModal] = useState({
     isOpen: false,
     title: '',
     desc: '',
     color: ''
-  })
+  });
 
   //state값
-  const { idResult, userId, pwResult, udResult } = useSelector(state => state.findState);
+  const { idResult, userId, pwResult, udResult } = useSelector(
+    state => state.findState
+  );
 
   //param으로 넘기기 위한 값
   const [inputId, setInputId] = useState('');
@@ -52,7 +58,9 @@ export const AccountFindPassword =  props => {
 
   useEffect(() => {
     if (isRunning) clearInterval(timer);
-    return () => { clearInterval(timer); }
+    return () => {
+      clearInterval(timer);
+    };
   }, []);
 
   const handlerSend = async () => {
@@ -62,7 +70,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '아이디를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -72,7 +80,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '휴대폰 번호를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -82,7 +90,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '인증번호가 발송은 3회까지만 가능합니다.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
     if (inputHpno.length < 11) {
@@ -91,29 +99,28 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '올바른 번호를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
     const res = await findAPI.sendForPw({ userId: inputId, hpno: inputHpno });
     if (res?.data.code === -1) {
-
       setModal({
         isOpen: true,
         title: '인증번호 발송',
         desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.',
         color: 'modal-danger'
-      })
+      });
     } else if (res?.data.code === 0) {
       setModal({
         isOpen: true,
         title: '인증번호 발송',
         desc: '인증번호가 발송되었습니다.',
         color: 'modal-primary'
-      })
+      });
       timeStart();
     }
-  }
+  };
 
   const timeStart = () => {
     if (isRunning) {
@@ -125,7 +132,7 @@ export const AccountFindPassword =  props => {
 
     setSendCount(sendCount + 1);
     timerStart(180);
-  }
+  };
 
   const timerStart = count => {
     let minutes, seconds;
@@ -150,7 +157,7 @@ export const AccountFindPassword =  props => {
           title: '인증번호 만료',
           desc: '인증번호가 만료되었습니다.',
           color: 'modal-danger'
-        })
+        });
       }
     }, 1000);
 
@@ -158,8 +165,8 @@ export const AccountFindPassword =  props => {
 
     return () => {
       clearInterval(timer);
-    }
+    };
-  }
+  };
 
   const handlerConfirm = async () => {
     if (!inputId) {
@@ -168,7 +175,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '아이디를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -178,7 +185,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 발송',
         desc: '휴대폰 번호를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -188,7 +195,7 @@ export const AccountFindPassword =  props => {
         title: '인증번호 인증',
         desc: '인증번호를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -211,7 +218,7 @@ export const AccountFindPassword =  props => {
       setIsCrtfy(true);
       setIsRunning(false);
     }
-  }
+  };
 
   const handlerUpdatePw = async () => {
     if (!inputNewPw || !inputNewPwCk) {
@@ -220,18 +227,19 @@ export const AccountFindPassword =  props => {
         title: '비밀번호 변경',
         desc: '비밀번호를 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
-    const reg = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
+    const reg =
+      /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
     if (!reg.test(inputNewPw) || !reg.test(inputNewPwCk)) {
       setModal({
         isOpen: true,
         title: '비밀번호 변경',
         desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
         color: 'modal-danger'
-      })
+      });
       return;
     }
 
@@ -245,36 +253,40 @@ export const AccountFindPassword =  props => {
       return;
     }
 
-
+    if (inputNewPw === inputNewPwCk && inputNewPw && inputNewPwCk) {
-    if((inputNewPw === inputNewPwCk) && inputNewPw && inputNewPwCk) {
+      dispatch(
-      dispatch(updatePwAction.request({userId: inputId, hpno: inputHpno, newPw: inputNewPw}));
+        updatePwAction.request({
+          userId: inputId,
+          hpno: inputHpno,
+          newPw: inputNewPw
+        })
+      );
       setSaveModal(!saveModal);
     }
-  }
+  };
 
   let id = '';
   let hpno = '';
   let crtfyhp = '';
   let newpw = '';
   let newpwck = '';
-  const handlerChange = (e) => {
+  const handlerChange = e => {
     const { name, value } = e.target;
 
     if (name == 'userId') {
       id = value;
-      setInputId(id)
+      setInputId(id);
-      
     } else if (name == 'hpno') {
       const regex = /^[0-9]{0,11}$/;
       if (regex.test(value)) {
         hpno = value;
-        setInputHpno(hpno)
+        setInputHpno(hpno);
       }
     } else if (name == 'crtfyhpNo') {
       const regex = /^[0-9]{0,6}$/;
       if (regex.test(value)) {
         crtfyhp = value;
-        setInputCrtfy(crtfyhp)
+        setInputCrtfy(crtfyhp);
       }
     } else if (name == 'newPw') {
       const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
@@ -289,7 +301,7 @@ export const AccountFindPassword =  props => {
         setInputNewPwCk(newpwck);
       }
     }
-  }
+  };
 
   // const handlerClose = () => {
   //   setModal({ ...modal, isOpen: !modal.isOpen });
@@ -335,11 +347,9 @@ export const AccountFindPassword =  props => {
               />
             </Col>
             <Col md='3' xs='12'>
-              <Button
+              <Button color='primary' type='button' onClick={handlerSend}>
-                color='primary'
+                인증번호 발송
-                type='button'
+              </Button>
-                onClick={handlerSend}
-              >인증번호 발송</Button>
             </Col>
           </div>
         </FormGroup>
@@ -353,11 +363,7 @@ export const AccountFindPassword =  props => {
                 placeholder='인증번호 입력'
                 value={inputCrtfy}
                 onChange={handlerChange}
-                {...sendCount > 0 ? 
+                {...(sendCount > 0 ? {} : { disabled: true })}
-                  {}
-                :
-                  {disabled: true}
-                }
               />
               {/* <span className='time'>남은시간 : 3:00</span> */}
               <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
@@ -369,12 +375,10 @@ export const AccountFindPassword =  props => {
                 color='primary'
                 type='button'
                 onClick={handlerConfirm}
-                {...isRunning ? 
+                {...(isRunning ? {} : { disabled: true })}
-                  {}
+              >
-                :
+                인증번호 확인
-                  {disabled: true}
+              </Button>
-                }
-              >인증번호 확인</Button>
             </Col>
           </div>
         </FormGroup>
@@ -392,17 +396,21 @@ export const AccountFindPassword =  props => {
               color='primary'
               type='button'
               onClick={() => setConfirmModal(!confirmModal)}
-              {...isCrtfy ?
+              {...(isCrtfy ? {} : { disabled: true })}
-                {}
+            >
-              :
+              확인
-                {disabled: true}
+            </Button>
-              }
-            >확인</Button>
 
-            <Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'>
+            <Modal
-              <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>비밀번호 확인</ModalHeader>
+              isOpen={confirmModal}
+              toggle={() => setConfirmModal(!confirmModal)}
+              className='modal-dialog-centered user-search-modal'
+            >
+              <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>
+                비밀번호 확인
+              </ModalHeader>
               <ModalBody>
-                <span class="etc-txt">새로운 비밀번호로 변경해 주세요.</span>
+                <span class='etc-txt'>새로운 비밀번호로 변경해 주세요.</span>
                 <FormGroup className='form-label-group position-relative has-icon-left'>
                   <InputGroup>
                     <InputGroupAddon addonType='prepend'>
@@ -439,11 +447,9 @@ export const AccountFindPassword =  props => {
                 </FormGroup>
               </ModalBody>
               <ModalFooter>
-                <Button
+                <Button color='primary' type='button' onClick={handlerUpdatePw}>
-                  color='primary'
+                  저장
-                  type='button'
+                </Button>
-                  onClick={handlerUpdatePw}
-                >저장</Button>
 
                 <div className='vertically-centered-modal'>
                   <Modal
@@ -465,7 +471,6 @@ export const AccountFindPassword =  props => {
                     </ModalFooter>
                   </Modal>
                 </div>
-
               </ModalFooter>
             </Modal>
           </div>
@@ -494,8 +499,7 @@ export const AccountFindPassword =  props => {
             </ModalFooter>
           </Modal>
         </div>
-
       </TabPane>
     </>
-  )
+  );
-}
+};