pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

인증번호 공통단 마이페이지에 적용

master
junh_eee(이준희) 7 months ago
parent
3f1c2f5663
commit
54cd49d42e
3 changed files with 145 additions and 251 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      src/components/account/mypage/AccountMypageForm.js
  2. 130
      src/components/account/mypage/AccountMypageHpno.js
  3. 141
      src/containers/account/mypage/AccountMypageContainer.js

125
src/components/account/mypage/AccountMypageForm.js
Unescape View File

@ -8,32 +8,17 @@ import {
FormGroup, FormGroup,
Input, Input,
Label, Label,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Button Button
} from '@component/ui'; } from '@component/ui';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
const AccountMypageForm = ({ const AccountMypageForm = ({
userInfo, userInfo,
handlerSmsSend,
isCrtfy,
seconds_Counter,
handler, handler,
minutes_Counter,
isRunning,
formModal,
handlerUpdate, handlerUpdate,
modal,
handlerSmsConfirm,
handlerChange,
handlerInput, handlerInput,
inputHpno, inputHpno,
inputCrtfy,
okinput, okinput,
handlerWidthrow handlerWidthrow
}) => { }) => {
const history = useHistory(); const history = useHistory();
@ -157,116 +142,6 @@ const AccountMypageForm = ({
disabled disabled
value={!okinput ? userInfo.hpno || '' : inputHpno} value={!okinput ? userInfo.hpno || '' : inputHpno}
/> />
<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'
/>
</Col>
<Col md='4' xs='12'>
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
<span
className={
!isRunning || isCrtfy
? 'time d-none'
: 'time'
}
>
남은시간 {minutes_Counter}:
{seconds_Counter}
</span>
<Button
type='button'
color='secondary'
onClick={handlerSmsSend}
>
<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>
</div>
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>

130
src/components/account/mypage/AccountMypageHpno.js
Unescape View File

@ -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>
);
};

141
src/containers/account/mypage/AccountMypageContainer.js
Unescape View File

@ -8,10 +8,7 @@ import AccountMypagePwForm from '../../../components/account/mypage/AccountMypag
import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm'; import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm';
import { ConfirmModal } from '../../../components/modal/ConfirmModal'; import { ConfirmModal } from '../../../components/modal/ConfirmModal';
import { import { confirmCrtfyhp } from '@src/redux/features/account/register/registerThunk';
confirmCrtfyhp,
sendCrtfyhp
} from '@src/redux/features/account/register/registerThunk';
import { import {
getUserPage, getUserPage,
updateUser, updateUser,
@ -19,7 +16,11 @@ import {
} from '@src/redux/features/account/auth/authThunk'; } from '@src/redux/features/account/auth/authThunk';
import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { openModal } from '@src/redux/features/comn/message/messageSlice';
import { MODAL_CRTFYHP, MODAL_HEADER, MODAL_BODY } from '@src/configs/msgConst'; import { MODAL_CRTFYHP, MODAL_HEADER, MODAL_BODY } from '@src/configs/msgConst';
import { ParentsContainer } from './ParentsContainer'; import { AccountMypageHpno } from '@src/components/account/mypage/AccountMypageHpno';
import {
isConfirmCrtfyhp,
isSendCrtfyhp
} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice';
// ** Function to toggle tabs // ** Function to toggle tabs
const AccountMypageContainer = () => { const AccountMypageContainer = () => {
@ -46,18 +47,6 @@ const AccountMypageContainer = () => {
// 인증번호 // 인증번호
const [inputCrtfy, setInputCrtfy] = useState(''); const [inputCrtfy, setInputCrtfy] = useState('');
// 타이머 분
const [minutes_Counter, setMinutes_Counter] = useState('03');
// 타이머 초
const [seconds_Counter, setSeconds_Counter] = useState('00');
// 타이머
const [timer, setTimer] = useState(null);
// 타이머 실행 여부
const [isRunning, setIsRunning] = useState(false);
// 인증번호 발송 횟수
const [sendCount, setSendCount] = useState(0);
// 인증번호 발송 여부
const [isCrtfy, setIsCrtfy] = useState(false);
// 전화번호 변경 여부 // 전화번호 변경 여부
const [okinput, setOkinput] = useState(false); const [okinput, setOkinput] = useState(false);
// 전화번호 업데이트 여부 // 전화번호 업데이트 여부
@ -71,16 +60,6 @@ const AccountMypageContainer = () => {
color: '' color: ''
}); });
// 타이머 언마운트시 종료
useEffect(() => {
if (isRunning) {
clearInterval(timer);
}
return () => {
clearInterval(timer);
};
}, []);
useEffect(() => { useEffect(() => {
if (userInfo) { if (userInfo) {
setOkcheck(!okinput ? userInfo.hpno : inputHpno); setOkcheck(!okinput ? userInfo.hpno : inputHpno);
@ -109,92 +88,8 @@ const AccountMypageContainer = () => {
); );
}; };
// 타이머
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);
setInputCrtfy('crtfyhpNo', '');
// setCrtfyNo('');
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.expire);
}
}, 1000);
setTimer(timer);
return () => {
clearInterval(timer);
};
};
//휴대폰 인증번호 보내기
const handlerSmsSend = async () => {
// const vData = getValues();
if (!inputHpno) {
handlerOpenModal(
MODAL_HEADER.crtfyhp,
'휴대폰 번호를' + MODAL_BODY.valid
);
return;
}
if (inputHpno.length < 11) {
handlerOpenModal(
MODAL_HEADER.crtfyhp,
'올바른 번호를' + MODAL_BODY.valid
);
return;
}
if (sendCount >= 3) {
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.count);
return;
}
const { payload: data } = await dispatch(sendCrtfyhp(inputHpno));
if (!data.result) {
if (data.code === -1) {
handlerOpenModal(MODAL_HEADER.crtfyhp, '이미 가입된 휴대폰입니다.');
} else {
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed);
}
return;
} else {
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.send);
timeStart();
}
};
const timeStart = () => {
if (isRunning) {
clearInterval(timer);
}
setIsRunning(true);
setIsCrtfy(false);
setSendCount(sendCount + 1);
timerStart(180);
};
//휴대폰 인증하기 //휴대폰 인증하기
const handlerSmsConfirm = async () => { const handlerSmsConfirm = async () => {
//const vData = getValues();
if (!inputHpno) { if (!inputHpno) {
handlerOpenModal( handlerOpenModal(
MODAL_HEADER.crtfyhp, MODAL_HEADER.crtfyhp,
@ -208,7 +103,6 @@ const AccountMypageContainer = () => {
return false; return false;
} }
// const res = await accountAPI.confirmCrtfyhp(inputHpno, inputCrtfy);
const { payload: data } = await dispatch( const { payload: data } = await dispatch(
confirmCrtfyhp({ hpno: inputHpno, crtfyNo: inputCrtfy }) confirmCrtfyhp({ hpno: inputHpno, crtfyNo: inputCrtfy })
); );
@ -220,9 +114,9 @@ const AccountMypageContainer = () => {
} else { } else {
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm);
setOkinput(!okinput); setOkinput(!okinput);
dispatch(isSendCrtfyhp(false));
dispatch(isConfirmCrtfyhp(true));
} }
setIsRunning(true);
setIsCrtfy(true);
}; };
// input 헨들러 // input 헨들러
@ -313,21 +207,19 @@ const AccountMypageContainer = () => {
<AccountMypageForm <AccountMypageForm
userInfo={userInfo} userInfo={userInfo}
handler={handler} handler={handler}
formModal={formModal}
handlerUpdate={handlerUpdate} handlerUpdate={handlerUpdate}
handlerInput={handlerInput} handlerInput={handlerInput}
inputHpno={inputHpno} inputHpno={inputHpno}
inputCrtfy={inputCrtfy}
okinput={okinput} okinput={okinput}
handlerWidthrow={handlerLeaveCheck}
/>
<AccountMypageHpno
formModal={formModal}
handler={handler}
inputHpno={inputHpno}
handlerChange={handlerChange} handlerChange={handlerChange}
inputCrtfy={inputCrtfy}
handlerSmsConfirm={handlerSmsConfirm} handlerSmsConfirm={handlerSmsConfirm}
modal={modal}
isRunning={isRunning}
minutes_Counter={minutes_Counter}
seconds_Counter={seconds_Counter}
handlerSmsSend={handlerSmsSend}
isCrtfy={isCrtfy}
handlerWidthrow={handlerLeaveCheck}
/> />
<ConfirmModal <ConfirmModal
modal={modal} modal={modal}
@ -335,9 +227,6 @@ const AccountMypageContainer = () => {
handlerConfirm={handlerLeave} handlerConfirm={handlerLeave}
color='danger' color='danger'
/> />
{/* <div style={{ background: '#ff00ff' }}>
<ParentsContainer />
</div> */}
</> </>
) : ( ) : (
<></> <></>

Write Preview
Loading…
Cancel
Save