|
|
@ -8,12 +8,148 @@ import { |
|
|
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
// ** Styles
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
|
|
|
|
import { accountApi } from '../../../modules/account/register/apis/accountApi'; |
|
|
|
//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
|
|
|
|
//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
|
|
|
|
//const [detailData, setDetailData] = useState(userPage.UserPageData);
|
|
|
|
//const [detailData, setDetailData] = useState(userPage.UserPageData);
|
|
|
|
|
|
|
|
|
|
|
|
const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
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 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); |
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const res = await accountApi.crtfyhpConfirm(vData.hpno, vData.crtfyNo); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!res.data.result) { |
|
|
|
|
|
|
|
setModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '인증번호 인증', |
|
|
|
|
|
|
|
desc: '인증번호 가 잘못 되었습니다.' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
setIsRunning(true); |
|
|
|
|
|
|
|
setIsCrtfy(true); |
|
|
|
|
|
|
|
}; |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Row className='app-user-edit'> |
|
|
|
<Row className='app-user-edit'> |
|
|
|
<Col sm='12'> |
|
|
|
<Col sm='12'> |
|
|
@ -55,18 +191,18 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='userId'>ID</Label> |
|
|
|
<Label for='userId'>ID</Label> |
|
|
|
<Input type='text' id='userId' size='sm' placeholder='' value={userInfo[0].userId || ""} disabled /> |
|
|
|
<Input type='text' id='userId' size='sm' placeholder='' value={userInfo[0].userId || ""} diabled /> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='email'>E-mail</Label> |
|
|
|
<Label for='email'>E-mail</Label> |
|
|
|
<Input type='text' id='email' size='sm' placeholder={userInfo[0].email || ""} /> |
|
|
|
<Input type='text' id='email' size='sm' placeholder='' value={userInfo[0].email} onChange={handlerInput} /> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label className='form-label' for='test'> |
|
|
|
<Label className='form-label' for='clncd'> |
|
|
|
휴대폰 번호 |
|
|
|
휴대폰 번호 |
|
|
|
</Label> |
|
|
|
</Label> |
|
|
|
<div className='user-phone-btn' > |
|
|
|
<div className='user-phone-btn' > |
|
|
@ -74,7 +210,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
<span className='d-sm-inline-block'>변경</span> |
|
|
|
<span className='d-sm-inline-block'>변경</span> |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Input type='number' name='test' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} /> |
|
|
|
<Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} /> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<Modal |
|
|
|
<Modal |
|
|
|
isOpen={formModal} |
|
|
|
isOpen={formModal} |
|
|
@ -99,10 +235,10 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col md='4' xs='12'> |
|
|
|
<Col md='4' xs='12'> |
|
|
|
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} |
|
|
|
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} |
|
|
|
<span className='time d-none'> |
|
|
|
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> |
|
|
|
남은시간 : 3:00 |
|
|
|
남은시간 {minutes_Counter}:{seconds_Counter} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<Button.Ripple type='button' color='secondary'> |
|
|
|
<Button.Ripple type='button' color='secondary'onClick={handlerSmsSend}> |
|
|
|
<span className='d-sm-inline-block'>인증번호 발송</span> |
|
|
|
<span className='d-sm-inline-block'>인증번호 발송</span> |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
@ -113,11 +249,11 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Row className='input-inline-btn'> |
|
|
|
<Row className='input-inline-btn'> |
|
|
|
<Col md='8'> |
|
|
|
<Col md='8'> |
|
|
|
<Label className='form-label' for='verifCode'>인증번호</Label> |
|
|
|
<Label className='form-label' for='crtfyNo'>인증번호</Label> |
|
|
|
<Input type='number' name='test' id='verifCode' size='sm' /> |
|
|
|
<Input type='number' name='test' id='verifCode' size='sm' /> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col md='4' xs='12'> |
|
|
|
<Col md='4' xs='12'> |
|
|
|
<Button.Ripple type='button' color='secondary'> |
|
|
|
<Button.Ripple type='button' color='secondary'onClick={handlerSmsConfirm}> |
|
|
|
<span className='d-sm-inline-block'>인증하기</span> |
|
|
|
<span className='d-sm-inline-block'>인증하기</span> |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
@ -151,6 +287,29 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { |
|
|
|
</CardBody> |
|
|
|
</CardBody> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
</Col> |
|
|
|
</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> |
|
|
|
</Row> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|