|
|
@ -10,7 +10,7 @@ import { |
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter |
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter |
|
|
|
} from 'reactstrap' |
|
|
|
} from 'reactstrap' |
|
|
|
|
|
|
|
import { accountApi } from '../../../modules/account/register/apis/accountApi'; |
|
|
|
import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm'; |
|
|
|
import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm'; |
|
|
|
import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm'; |
|
|
|
import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm'; |
|
|
|
import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction'; |
|
|
|
import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction'; |
|
|
@ -34,13 +34,184 @@ const AccountMypageContainer = () => { |
|
|
|
|
|
|
|
|
|
|
|
const [userInfo, setUserInfo] = useState(); |
|
|
|
const [userInfo, setUserInfo] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [inputHpno, setInputHpno] = useState(''); |
|
|
|
|
|
|
|
const [inputCrtfy, setInputCrtfy] = useState(''); |
|
|
|
|
|
|
|
const [okinput, setOkinput] = useState(false) |
|
|
|
|
|
|
|
const [okcheck, setOkcheck] = useState(''); |
|
|
|
|
|
|
|
const [isRunning, setIsRunning] = useState(false); |
|
|
|
|
|
|
|
const [sendCount, setSendCount] = useState(0); |
|
|
|
|
|
|
|
const [isCrtfy, setIsCrtfy] = useState(false); |
|
|
|
|
|
|
|
const [minutes_Counter, setMinutes_Counter] = useState('03'); |
|
|
|
|
|
|
|
const [seconds_Counter, setSeconds_Counter] = useState('00'); |
|
|
|
|
|
|
|
const [timer, setTimer] = useState(null); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [modal, setModal] = useState({ |
|
|
|
|
|
|
|
isOpen: false, |
|
|
|
|
|
|
|
title: '', |
|
|
|
|
|
|
|
desc: '' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const timerStart = count => { |
|
|
|
|
|
|
|
let minutes, seconds; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const timer = setInterval(() => { |
|
|
|
|
|
|
|
setIsRunning(true); |
|
|
|
|
|
|
|
minutes = parseInt(count / 60, 10); |
|
|
|
|
|
|
|
seconds = parseInt(count % 60, 10); |
|
|
|
|
|
|
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
|
|
|
|
|
|
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
|
|
|
|
|
|
|
setMinutes_Counter(minutes); |
|
|
|
|
|
|
|
setSeconds_Counter(seconds); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//타이머 끝
|
|
|
|
|
|
|
|
if (--count < 0) { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
setIsRunning(false); |
|
|
|
|
|
|
|
setInputCrtfy('crtfyhpNo', ''); |
|
|
|
|
|
|
|
// setCrtfyNo('');
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimer(timer); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (userInfo) { |
|
|
|
|
|
|
|
setOkcheck(!okinput ? userInfo.hpno : inputHpno) |
|
|
|
|
|
|
|
console.log("okcheck>>>>>", okcheck); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [okinput]) |
|
|
|
|
|
|
|
//휴대폰 인증번호 보내기
|
|
|
|
|
|
|
|
const handlerSmsSend = async () => { |
|
|
|
|
|
|
|
// const vData = getValues();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!inputHpno) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '휴대폰 번호를 입력 해주세요.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (sendCount >= 3) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '인증번호 발송은 3회 까지만 가능합니다.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const res = await accountApi.crtfyhp(inputHpno); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!res.data.result) { |
|
|
|
|
|
|
|
if (res.data.code === -1) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '이미 가입된 휴대폰 입니다.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '인증번호 발송을 실패하였습니다.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '인증번호를 발송했습니다.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// console.log(res);
|
|
|
|
|
|
|
|
if (isRunning) { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
setIsRunning(true); |
|
|
|
|
|
|
|
setSendCount(sendCount + 1); |
|
|
|
|
|
|
|
timerStart(180); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// handlerSmsSend();
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
// console.log('isRunning>>>', isRunning);
|
|
|
|
|
|
|
|
if (isRunning) { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// handlerSmsSend();
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//휴대폰 인증하기
|
|
|
|
|
|
|
|
const handlerSmsConfirm = async () => { |
|
|
|
|
|
|
|
//const vData = getValues();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!inputCrtfy || !inputHpno) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
|
|
|
desc: '휴대폰 번호를 입력 해주세요.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!inputCrtfy) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
|
|
|
desc: '인증번호 를 입력 해주세요.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!res.data.result) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
|
|
|
desc: '인증번호 가 잘못 되었습니다.' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
else if (res?.data.code === 0) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
|
|
|
desc: '인증번호가 발송되었습니다.', |
|
|
|
|
|
|
|
color: 'modal-primary' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 성공', |
|
|
|
|
|
|
|
desc: '인증번호 성공했습니다.', |
|
|
|
|
|
|
|
color: 'modal-primary' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
setOkinput(!okinput); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
setIsRunning(true); |
|
|
|
|
|
|
|
setIsCrtfy(true); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (userPage) |
|
|
|
if (userPage) |
|
|
|
setUserInfo(userPage[0]) |
|
|
|
setUserInfo(userPage[0]) |
|
|
|
}, [userPage]) |
|
|
|
}, [userPage]) |
|
|
|
|
|
|
|
|
|
|
|
const handlerInput = e => { |
|
|
|
const handlerInput = e => { |
|
|
|
|
|
|
|
|
|
|
|
const { name, value } = e.target; |
|
|
|
const { name, value } = e.target; |
|
|
|
setUserInfo({ |
|
|
|
setUserInfo({ |
|
|
|
...userInfo, |
|
|
|
...userInfo, |
|
|
@ -58,12 +229,23 @@ const AccountMypageContainer = () => { |
|
|
|
setFormModal(!formModal) |
|
|
|
setFormModal(!formModal) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerChange = (e) => { |
|
|
|
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (name == 'hpno') { |
|
|
|
|
|
|
|
setInputHpno(value); |
|
|
|
|
|
|
|
} else if (name == 'crtfyhpNo') { |
|
|
|
|
|
|
|
setInputCrtfy(value); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
//업데이트
|
|
|
|
//업데이트
|
|
|
|
const handlerUpdate = () => { |
|
|
|
const handlerUpdate = () => { |
|
|
|
|
|
|
|
debugger |
|
|
|
const param = { |
|
|
|
const param = { |
|
|
|
cstmrSno: user.cstmrSno, |
|
|
|
cstmrSno: user.cstmrSno, |
|
|
|
email: userInfo.email, |
|
|
|
email: userInfo.email, |
|
|
|
updateUserId: userInfo.userId, |
|
|
|
updateUserId: userInfo.userId, |
|
|
|
|
|
|
|
hpno: okcheck |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
dispatch(userupdateAction.request(param)); |
|
|
|
dispatch(userupdateAction.request(param)); |
|
|
@ -89,11 +271,21 @@ const AccountMypageContainer = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{activeTab == 1 ? <AccountMypageForm |
|
|
|
{activeTab == 1 ? <AccountMypageForm |
|
|
|
userInfo={userInfo} |
|
|
|
userInfo={userInfo} |
|
|
|
toggle={toggle} |
|
|
|
|
|
|
|
handler={handler} |
|
|
|
handler={handler} |
|
|
|
formModal={formModal} |
|
|
|
formModal={formModal} |
|
|
|
handlerUpdate={handlerUpdate} |
|
|
|
handlerUpdate={handlerUpdate} |
|
|
|
handlerInput={handlerInput} |
|
|
|
handlerInput={handlerInput} |
|
|
|
|
|
|
|
inputHpno={inputHpno} |
|
|
|
|
|
|
|
inputCrtfy={inputCrtfy} |
|
|
|
|
|
|
|
okinput={okinput} |
|
|
|
|
|
|
|
handlerChange={handlerChange} |
|
|
|
|
|
|
|
handlerSmsConfirm={handlerSmsConfirm} |
|
|
|
|
|
|
|
modal={modal} |
|
|
|
|
|
|
|
isRunning={isRunning} |
|
|
|
|
|
|
|
minutes_Counter={minutes_Counter} |
|
|
|
|
|
|
|
seconds_Counter={seconds_Counter} |
|
|
|
|
|
|
|
handlerSmsSend={handlerSmsSend} |
|
|
|
|
|
|
|
isCrtfy={isCrtfy} |
|
|
|
/> |
|
|
|
/> |
|
|
|
: |
|
|
|
: |
|
|
|
<></> |
|
|
|
<></> |
|
|
@ -105,6 +297,29 @@ const AccountMypageContainer = () => { |
|
|
|
: |
|
|
|
: |
|
|
|
<></> |
|
|
|
<></> |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
<div className='vertically-centered-modal'> |
|
|
|
|
|
|
|
<Modal |
|
|
|
|
|
|
|
isOpen={modal.isOpen} |
|
|
|
|
|
|
|
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
|
|
|
|
|
|
|
modalClassName='modal-danger' |
|
|
|
|
|
|
|
className='modal-dialog-centered' |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<ModalHeader |
|
|
|
|
|
|
|
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{modal.title} |
|
|
|
|
|
|
|
</ModalHeader> |
|
|
|
|
|
|
|
<ModalBody>{modal.desc}</ModalBody> |
|
|
|
|
|
|
|
<ModalFooter> |
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
|
|
color='danger' |
|
|
|
|
|
|
|
onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
확인 |
|
|
|
|
|
|
|
</Button>{' '} |
|
|
|
|
|
|
|
</ModalFooter> |
|
|
|
|
|
|
|
</Modal> |
|
|
|
|
|
|
|
</div> |
|
|
|
<MessageErrorModal /> |
|
|
|
<MessageErrorModal /> |
|
|
|
<MessageInfoModal /> |
|
|
|
<MessageInfoModal /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|