|
|
|
@ -2,8 +2,8 @@
|
|
|
|
|
import { useState, useEffect } from 'react' |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
|
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter |
|
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
|
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter |
|
|
|
|
} from 'reactstrap' |
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
@ -12,282 +12,282 @@ import { accountApi } from '../../../modules/account/register/apis/accountApi';
|
|
|
|
|
//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
|
|
|
|
|
//const [detailData, setDetailData] = useState(userPage.UserPageData);
|
|
|
|
|
|
|
|
|
|
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, 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); |
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
}; |
|
|
|
|
}, []); |
|
|
|
|
// handlerSmsSend();
|
|
|
|
|
}; |
|
|
|
|
useEffect(() => { |
|
|
|
|
// console.log('isRunning>>>', isRunning);
|
|
|
|
|
if (isRunning) { |
|
|
|
|
clearInterval(timer); |
|
|
|
|
} else { |
|
|
|
|
// handlerSmsSend();
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//휴대폰 인증하기
|
|
|
|
|
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 ( |
|
|
|
|
<Row className='app-user-edit'> |
|
|
|
|
<Col sm='12'> |
|
|
|
|
<Card> |
|
|
|
|
<CardBody className='card-body-tab-cont'> |
|
|
|
|
<TabPane tabId='1'> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
{userInfo ? |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='memberName'>이름</Label> |
|
|
|
|
<Input type='text' id='memberName' size='sm' placeholder='' value={userInfo[0].memberName || ''} disabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='brithdyDate'>생년월일</Label> |
|
|
|
|
<Input type='text' id='brithdyDate' size='sm' placeholder='' value={userInfo[0].brthdyDate || ""} disabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='cenderCD'>성별</Label> |
|
|
|
|
<Input type='select' name='select' size='sm' id='cenderCD' value={userInfo[0].genderCd || ""} disabled > |
|
|
|
|
<option>남자</option> |
|
|
|
|
<option>여자</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='cntryCD'>국가코드</Label> |
|
|
|
|
<Input type='select' name='select' size='sm' id='cntryCD' > |
|
|
|
|
<option>대한민국</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='userId'>ID</Label> |
|
|
|
|
<Input type='text' id='userId' size='sm' placeholder='' value={userInfo[0].userId || ""} diabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='email'>E-mail</Label> |
|
|
|
|
<Input type='text' id='email' size='sm' placeholder='' value={userInfo[0].email} onChange={handlerInput} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className='form-label' for='clncd'> |
|
|
|
|
휴대폰 번호 |
|
|
|
|
</Label> |
|
|
|
|
<div className='user-phone-btn' > |
|
|
|
|
<Button.Ripple type='button' color='primary' onClick={handler}> |
|
|
|
|
<span className='d-sm-inline-block'>변경</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
<Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} /> |
|
|
|
|
<div> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={formModal} |
|
|
|
|
toggle={handler} |
|
|
|
|
className='modal-dialog-centered' |
|
|
|
|
> |
|
|
|
|
<ModalHeader toggle={handler}> |
|
|
|
|
휴대폰번호 변경 |
|
|
|
|
</ModalHeader> |
|
|
|
|
<ModalBody> |
|
|
|
|
<div class='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='test' id='hpno' size='sm' /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} |
|
|
|
|
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> |
|
|
|
|
남은시간 {minutes_Counter}:{seconds_Counter} |
|
|
|
|
</span> |
|
|
|
|
<Button.Ripple type='button' color='secondary'onClick={handlerSmsSend}> |
|
|
|
|
<span className='d-sm-inline-block'>인증번호 발송</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</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='test' id='verifCode' size='sm' /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
<Button.Ripple type='button' color='secondary'onClick={handlerSmsConfirm}> |
|
|
|
|
<span className='d-sm-inline-block'>인증하기</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</ModalBody> |
|
|
|
|
<ModalFooter> |
|
|
|
|
<Button |
|
|
|
|
color='primary' |
|
|
|
|
onClick={handler} |
|
|
|
|
> |
|
|
|
|
확인 |
|
|
|
|
</Button> |
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
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 ( |
|
|
|
|
<Row className='app-user-edit'> |
|
|
|
|
<Col sm='12'> |
|
|
|
|
<Card> |
|
|
|
|
<CardBody className='card-body-tab-cont'> |
|
|
|
|
<TabPane tabId='1'> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
{userInfo ? |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='memberName'>이름</Label> |
|
|
|
|
<Input type='text' id='memberName' size='sm' placeholder='' value={userInfo.memberName || ''} disabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='brithdyDate'>생년월일</Label> |
|
|
|
|
<Input type='text' id='brithdyDate' size='sm' placeholder='' value={userInfo.brthdyDate || ""} disabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='cenderCD'>성별</Label> |
|
|
|
|
<Input type='select' name='select' size='sm' id='cenderCD' value={userInfo.genderCd || ""} disabled > |
|
|
|
|
<option>남자</option> |
|
|
|
|
<option>여자</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='cntryCD'>국가코드</Label> |
|
|
|
|
<Input type='select' name='select' size='sm' id='cntryCD' > |
|
|
|
|
<option>대한민국</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='userId'>ID</Label> |
|
|
|
|
<Input type='text' id='userId' size='sm' placeholder='' value={userInfo.userId || ""} disabled /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='email'>E-mail</Label> |
|
|
|
|
<Input type='text' id='email' name='email' size='sm' placeholder='' defaultValue={userInfo.email} onChange={(e) => handlerInput(e)} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className='form-label' for='clncd'> |
|
|
|
|
휴대폰 번호 |
|
|
|
|
</Label> |
|
|
|
|
<div className='user-phone-btn' > |
|
|
|
|
<Button.Ripple type='button' color='primary' onClick={handler}> |
|
|
|
|
<span className='d-sm-inline-block'>변경</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
<Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo.hpno || ""} /> |
|
|
|
|
<div> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={formModal} |
|
|
|
|
toggle={handler} |
|
|
|
|
className='modal-dialog-centered' |
|
|
|
|
> |
|
|
|
|
<ModalHeader toggle={handler}> |
|
|
|
|
휴대폰번호 변경 |
|
|
|
|
</ModalHeader> |
|
|
|
|
<ModalBody> |
|
|
|
|
<div class='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' disabled name='test' id='hpno' size='sm' /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} |
|
|
|
|
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> |
|
|
|
|
남은시간 {minutes_Counter}:{seconds_Counter} |
|
|
|
|
</span> |
|
|
|
|
<Button.Ripple type='button' color='secondary' onClick={handlerSmsSend}> |
|
|
|
|
<span className='d-sm-inline-block'>인증번호 발송</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</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='test' id='verifCode' size='sm' /> |
|
|
|
|
</Col> |
|
|
|
|
<Col md='4' xs='12'> |
|
|
|
|
<Button.Ripple type='button' color='secondary' onClick={handlerSmsConfirm}> |
|
|
|
|
<span className='d-sm-inline-block'>인증하기</span> |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
: <></> |
|
|
|
|
} |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</ModalBody> |
|
|
|
|
<ModalFooter> |
|
|
|
|
<Button |
|
|
|
|
color='primary' |
|
|
|
|
onClick={handler} |
|
|
|
|
> |
|
|
|
|
확인 |
|
|
|
|
</Button> |
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
: <></> |
|
|
|
|
} |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
|
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|
<div className='vertically-centered-modal'> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|
<div className='vertically-centered-modal'> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={modal.isOpen} |
|
|
|
|
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
|
|
|
@ -310,7 +310,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate,handlerI
|
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|
</Row> |
|
|
|
|
) |
|
|
|
|
</Row> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default AccountMypageForm; |
|
|
|
|