|
|
|
@ -8,148 +8,20 @@ import {
|
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
|
import { accountApi } from '../../../modules/account/register/apis/accountApi'; |
|
|
|
|
//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
|
|
|
|
|
//const [detailData, setDetailData] = useState(userPage.UserPageData);
|
|
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handlerInput }) => { |
|
|
|
|
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 AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,handler,minutes_Counter, isRunning ,formModal, handlerUpdate,modal,handlerSmsConfirm,handlerChange,handlerInput,inputHpno,inputCrtfy,okinput}) => { |
|
|
|
|
|
|
|
|
|
const timerStart = count => { |
|
|
|
|
let minutes, seconds; |
|
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
setValue('crtfyNo', ''); |
|
|
|
|
// setCrtfyNo('');
|
|
|
|
|
} |
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
setTimer(timer); |
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
clearInterval(timer); |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
//휴대폰 인증번호 보내기
|
|
|
|
|
const handlerSmsSend = async () => { |
|
|
|
|
// const vData = getValues();
|
|
|
|
|
|
|
|
|
|
if (!userInfo.clncd || !userInfo.hpno) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
desc: '휴대폰 번호를 입력 해주세요.' |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (sendCount >= 3) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
desc: '인증번호 발송은 3회 까지만 가능합니다.' |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const res = await accountApi.crtfyhp(userInfo.hpno); |
|
|
|
|
|
|
|
|
|
if (!res.data.result) { |
|
|
|
|
if (res.data.code === -1) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
desc: '이미 가입된 휴대폰 입니다.' |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 발송', |
|
|
|
|
desc: '인증번호 발송을 실패하였습니다.' |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// 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 (!userInfo.clncd || !userInfo.hpno) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
desc: '휴대폰 번호를 입력 해주세요.' |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
if (!userInfo.crtfyNo) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
desc: '인증번호 를 입력 해주세요.' |
|
|
|
|
}); |
|
|
|
|
return false; |
|
|
|
|
function handleUseHitory() { |
|
|
|
|
history.push('/'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const res = await accountApi.crtfyhpConfirm(vData.hpno, vData.crtfyNo); |
|
|
|
|
|
|
|
|
|
if (!res.data.result) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
desc: '인증번호 가 잘못 되었습니다.' |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
setIsRunning(true); |
|
|
|
|
setIsCrtfy(true); |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<Row className='app-user-edit'> |
|
|
|
|
<Col sm='12'> |
|
|
|
@ -210,7 +82,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
|
|
|
|
|
<span className='d-sm-inline-block'>변경</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
<Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo.hpno || ""} /> |
|
|
|
|
<Input type='number' name='clncd' id='hpno' size='sm' placeholder='' disabled value={!okinput ? userInfo.hpno || "" : inputHpno } /> |
|
|
|
|
<div> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={formModal} |
|
|
|
@ -231,7 +103,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
|
|
|
|
|
<Row className='input-inline-btn'> |
|
|
|
|
<Col md='8'> |
|
|
|
|
<Label className='form-label' for='hpno'>휴대폰 번호</Label> |
|
|
|
|
<Input type='number' disabled name='test' id='hpno' size='sm' /> |
|
|
|
|
<Input type='number' name='hpno' id='hpno' size='sm' value={inputHpno} onChange={handlerChange} placeholder='01000000000' /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} |
|
|
|
@ -250,7 +122,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
|
|
|
|
|
<Row className='input-inline-btn'> |
|
|
|
|
<Col md='8'> |
|
|
|
|
<Label className='form-label' for='crtfyNo'>인증번호</Label> |
|
|
|
|
<Input type='number' name='test' id='verifCode' size='sm' /> |
|
|
|
|
<Input type='number' name='crtfyhpNo' id='crtfyhpNo' size='sm' value={inputCrtfy} onChange={handlerChange} /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
<Button.Ripple type='button' color='secondary' onClick={handlerSmsConfirm}> |
|
|
|
@ -280,36 +152,13 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
|
|
|
|
|
</div> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple className='mr-1' color='primary' size='sm' onClick={handlerUpdate}>저장</Button.Ripple> |
|
|
|
|
<Button.Ripple color='danger' size='sm'>취소</Button.Ripple> |
|
|
|
|
<Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
|
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|
<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> |
|
|
|
|
</Row> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|