junh_eee(이준희)
7 months ago
3 changed files with 145 additions and 251 deletions
@ -0,0 +1,130 @@
|
||||
import { |
||||
Row, |
||||
Col, |
||||
FormGroup, |
||||
Input, |
||||
Label, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter, |
||||
Button |
||||
} from '@component/ui'; |
||||
import { useRef } from 'react'; |
||||
import { useSelector } from '@src/redux/store'; |
||||
import { CrtfyhpUtil } from '@src/utility/crtfyhpUtil'; |
||||
import { sendCrtfyhp } from '@src/redux/features/account/register/registerThunk'; |
||||
|
||||
export const AccountMypageHpno = ({ |
||||
formModal, |
||||
handler, |
||||
inputHpno, |
||||
inputCrtfy, |
||||
handlerChange, |
||||
handlerSmsConfirm |
||||
}) => { |
||||
const hookRef = useRef(); |
||||
const { isRunning, isCrtfyhp, counter } = useSelector( |
||||
state => state.crtfyhpState |
||||
); |
||||
|
||||
return ( |
||||
<div> |
||||
<Modal |
||||
isOpen={formModal} |
||||
toggle={handler} |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader toggle={handler}>휴대폰번호 변경</ModalHeader> |
||||
<ModalBody> |
||||
<div className='modal-box'> |
||||
<p className='ti'>휴대폰 번호 변경</p> |
||||
<p className='txt'>변경할 휴대폰 번호로 인증을 완료해 주세요.</p> |
||||
</div> |
||||
<Row> |
||||
<Col className='list-input' md='12'> |
||||
<FormGroup> |
||||
<Row className='input-inline-btn'> |
||||
<Col md='8'> |
||||
<Label className='form-label' for='hpno'> |
||||
휴대폰 번호 |
||||
</Label> |
||||
<Input |
||||
type='number' |
||||
name='hpno' |
||||
id='hpno' |
||||
bsSize='sm' |
||||
value={inputHpno} |
||||
onChange={handlerChange} |
||||
placeholder='01012345678' |
||||
disabled={isRunning || isCrtfyhp} |
||||
/> |
||||
</Col> |
||||
<Col md='4' xs='12'> |
||||
<span className={!isRunning ? 'time d-none' : 'time'}> |
||||
남은시간 {counter.min}:{counter.sec} |
||||
</span> |
||||
<Button |
||||
type='button' |
||||
color='secondary' |
||||
onClick={() => { |
||||
hookRef?.current?.handlerSendCrtfyhp({ |
||||
hpno: inputHpno |
||||
}); |
||||
}} |
||||
disabled={isRunning || isCrtfyhp} |
||||
> |
||||
<span className='d-sm-inline-block'>인증번호 발송</span> |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='12'> |
||||
<FormGroup> |
||||
<Row className='input-inline-btn'> |
||||
<Col md='8'> |
||||
<Label className='form-label' for='crtfyNo'> |
||||
인증번호 |
||||
</Label> |
||||
<Input |
||||
type='number' |
||||
name='crtfyhpNo' |
||||
id='crtfyhpNo' |
||||
bsSize='sm' |
||||
value={inputCrtfy} |
||||
onChange={handlerChange} |
||||
{...(isRunning ? {} : { disabled: true })} |
||||
/> |
||||
</Col> |
||||
<Col md='4' xs='12'> |
||||
<Button |
||||
type='button' |
||||
color='secondary' |
||||
onClick={handlerSmsConfirm} |
||||
{...(isRunning ? {} : { disabled: true })} |
||||
> |
||||
<span className='d-sm-inline-block'>인증하기</span> |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={handler}> |
||||
확인 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
<CrtfyhpUtil |
||||
ref={hookRef} |
||||
sendCrtfyhp={sendCrtfyhp} |
||||
rq={{ hpno: inputHpno }} |
||||
modalMessage='이미 가입된 휴대폰입니다.' |
||||
type='1' |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
Loading…
Reference in new issue