From 3f18266da1370203bd74e9e668cb630fb577953d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Mon, 26 Sep 2022 14:03:27 +0900 Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20/=20?= =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20-?= =?UTF-8?q?=20=EA=B5=AD=EA=B0=80=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/find/AccountFindPassword.js | 7 +- .../account/find/AccountFindUserId.js | 260 ++++++++++-------- .../account/register/AccountRegisterForm.js | 6 +- 3 files changed, 153 insertions(+), 120 deletions(-) diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js index f70eae5d..b8cda681 100644 --- a/src/components/account/find/AccountFindPassword.js +++ b/src/components/account/find/AccountFindPassword.js @@ -333,7 +333,12 @@ export const AccountFindPassword = props => {
- + {/* */} + + + diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js index b4c4000b..38af87bc 100644 --- a/src/components/account/find/AccountFindUserId.js +++ b/src/components/account/find/AccountFindUserId.js @@ -1,37 +1,52 @@ -import * as yup from 'yup'; -import classnames from 'classnames'; -import { yupResolver } from '@hookform/resolvers/yup'; -import { useState, useEffect, useMemo } from 'react' -import { useForm } from 'react-hook-form'; +import { useState, useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button, - Modal, ModalHeader, ModalBody, ModalFooter, FormFeedback } from 'reactstrap' - import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' +import { + Form, + InputGroup, + InputGroupAddon, + InputGroupText, + Col, + TabPane, + FormGroup, + Input, + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + FormFeedback +} from 'reactstrap'; +import { User } from 'react-feather'; import '../../../assets/css/custom.css'; -import { findUserIdAction, sendForIdAction } from '../../../modules/account/find/actions/findAction'; +import { + findUserIdAction, + sendForIdAction +} from '../../../modules/account/find/actions/findAction'; import { accountApi } from '../../../modules/account/register/apis/accountApi'; import { findAPI } from '../../../modules/account/find/apis/findApi'; -export const AccountFindUserId = props => { +export const AccountFindUserId = 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 [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 [inputName, setInputName] = useState(''); @@ -47,80 +62,85 @@ export const AccountFindUserId = props => { const [isCrtfy, setIsCrtfy] = useState(false); useEffect(() => { - if(isRunning) clearInterval(timer); - return () => { clearInterval(timer); } + if (isRunning) clearInterval(timer); + return () => { + clearInterval(timer); + }; }, []); - const handlerSend = async() => { - if(!inputName) { + const handlerSend = async () => { + if (!inputName) { setModal({ isOpen: true, title: '인증번호 발송', desc: '이름을 입력해 주세요.', color: 'modal-danger' - }) + }); return; } - if(!inputHpno) { + if (!inputHpno) { setModal({ isOpen: true, title: '인증번호 발송', desc: '휴대폰 번호를 입력해 주세요.', color: 'modal-danger' - }) + }); return; } - if(sendCount >= 3) { + if (sendCount >= 3) { setModal({ isOpen: true, title: '인증번호 발송', desc: '인증번호가 발송은 3회까지만 가능합니다.', color: 'modal-danger' - }) + }); return; } - if(inputHpno.length < 11) { + if (inputHpno.length < 11) { setModal({ isOpen: true, title: '인증번호 발송', desc: '올바른 번호를 입력해 주세요.', color: 'modal-danger' - }) + }); return; } - const res = await findAPI.sendForId({memberName: inputName, hpno: inputHpno}); - if(res?.data.code === -1) { + const res = await findAPI.sendForId({ + memberName: inputName, + hpno: inputHpno + }); + if (res?.data.code === -1) { setModal({ isOpen: true, title: '인증번호 발송', desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.', color: 'modal-danger' - }) - } else if(res?.data.code === 0) { + }); + } else if (res?.data.code === 0) { setModal({ isOpen: true, title: '인증번호 발송', desc: '인증번호가 발송되었습니다.', color: 'modal-primary' - }) + }); timeStart(); } - } + }; const timeStart = () => { - if(isRunning) { + if (isRunning) { clearInterval(timer); } setIsRunning(true); setIsCrtfy(false); - + setSendCount(sendCount + 1); timerStart(180); - } + }; const timerStart = count => { let minutes, seconds; @@ -145,7 +165,7 @@ export const AccountFindUserId = props => { title: '인증번호 만료', desc: '인증번호가 만료되었습니다.', color: 'modal-danger' - }) + }); } }, 1000); @@ -153,42 +173,42 @@ export const AccountFindUserId = props => { return () => { clearInterval(timer); - } - } + }; + }; - const handlerConfirm = async() => { - if(!inputHpno) { + const handlerConfirm = async () => { + if (!inputHpno) { setModal({ isOpen: true, title: '인증번호 인증', desc: '휴대폰 번호를 입력해 주세요.', color: 'modal-danger' - }) + }); return; } - if(!inputName) { + if (!inputName) { setModal({ isOpen: true, title: '인증번호 인증', desc: '이름을 입력해 주세요.', color: 'modal-danger' - }) + }); return; } - if(!inputCrtfy) { + if (!inputCrtfy) { setModal({ isOpen: true, title: '인증번호 인증', desc: '인증번호를 입력해 주세요.', color: 'modal-danger' - }) + }); return; } const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); - if(!res.data.result) { + if (!res.data.result) { setModal({ isOpen: true, title: '인증번호 인증', @@ -206,50 +226,51 @@ export const AccountFindUserId = props => { setIsCrtfy(true); setIsRunning(false); } - } + }; let memberName = ''; let hpno = ''; let crtfyhp = ''; const handlerChange = e => { - const {name, value} = e.target; + const { name, value } = e.target; - if(name == 'memberName') { + if (name == 'memberName') { const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/; - if(regex.test(value)) { + if (regex.test(value)) { memberName = value; - setInputName(memberName) + setInputName(memberName); } - } else if(name == 'hpno') { + } else if (name == 'hpno') { const regex = /^[0-9]{0,11}$/; - if(regex.test(value)) { + if (regex.test(value)) { hpno = value; - setInputHpno(hpno) + setInputHpno(hpno); } - } else if(name == 'crtfyhpNo') { + } else if (name == 'crtfyhpNo') { const regex = /^[0-9]{0,6}$/; - if(regex.test(value)) { + if (regex.test(value)) { crtfyhp = value; - setInputCrtfy(crtfyhp) + setInputCrtfy(crtfyhp); } } - } + }; //모든 인증 완료 후 확인버튼 const handlerFindId = () => { - dispatch(findUserIdAction.request({memberName: inputName, hpno: inputHpno})); + dispatch( + findUserIdAction.request({ memberName: inputName, hpno: inputHpno }) + ); setConfirmModal(!confirmModal); - } + }; - - return( + return ( <> - + {
- - + + {/* */} + + + @@ -278,14 +309,12 @@ export const AccountFindUserId = props => { value={inputHpno} onChange={handlerChange} /> - + - - + +
@@ -298,29 +327,23 @@ export const AccountFindUserId = props => { name='crtfyhpNo' placeholder='인증번호 입력' value={inputCrtfy} - onChange={handlerChange} - {...sendCount > 0 ? - {} - : - {disabled: true} - } + onChange={handlerChange} + {...(sendCount > 0 ? {} : { disabled: true })} /> 남은시간 {minutes_Counter}:{seconds_Counter} - + - - + {...(isRunning ? {} : { disabled: true })} + > + 인증번호 확인 + +
@@ -336,33 +359,35 @@ export const AccountFindUserId = props => { color='primary' type='button' onClick={handlerFindId} - {...isCrtfy ? - {} - : - {disabled: true} - } - >확인 - - setConfirmModal(!confirmModal)} - modalClassName='modal-primary' - className='modal-dialog-centered' - > - setConfirmModal(!confirmModal)}> - 아이디 확인 - - - 회원님의 아이디는
{userId?.data.userId} 입니다. - {/* 회원님의 아이디는
{result?.data.userId} 입니다. */} - - - {' '} - - + {...(isCrtfy ? {} : { disabled: true })} + > + 확인 + + setConfirmModal(!confirmModal)} + modalClassName='modal-primary' + className='modal-dialog-centered' + > + setConfirmModal(!confirmModal)}> + 아이디 확인 + + + 회원님의 아이디는 +
+ + {userId?.data.userId} + {' '} + 입니다. + {/* 회원님의 아이디는
{result?.data.userId} 입니다. */} + + + {' '} + + @@ -389,8 +414,7 @@ export const AccountFindUserId = props => { - - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index 23528620..ce99d409 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -447,7 +447,11 @@ export const AccountRegisterForm = ({ 'is-invalid': errors.clncd })} > - + + + {errors && errors.clncd && ( {errors.clncd.message}