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