pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

회원탈퇴 Modal 추가

pull/2/head
junh_eee(이준희) 2 years ago
parent
ad389eab4b
commit
f408817704
2 changed files with 555 additions and 379 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. 229
      src/components/account/mypage/AccountMypageForm.js
  2. 137
      src/containers/account/mypage/AccountMypageContainer.js

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

@ -1,10 +1,27 @@
// ** React Imports // ** React Imports
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react';
import { import {
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, Card,
Modal, ModalHeader, ModalBody, ModalFooter CardBody,
} from 'reactstrap' Row,
Col,
Nav,
NavItem,
NavLink,
TabContent,
TabPane,
Alert,
FormGroup,
Form,
Input,
Label,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
// ** Styles // ** Styles
import '../../../assets/css/custom.css'; import '../../../assets/css/custom.css';
@ -12,12 +29,28 @@ import '../../../assets/css/custom.css';
//const [detailData, setDetailData] = useState(userPage.UserPageData); //const [detailData, setDetailData] = useState(userPage.UserPageData);
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,handler,minutes_Counter, isRunning ,formModal, handlerUpdate,modal,handlerSmsConfirm,handlerChange,handlerInput,inputHpno,inputCrtfy,okinput}) => { const AccountMypageForm = ({
userInfo,
handlerSmsSend,
isCrtfy,
seconds_Counter,
handler,
minutes_Counter,
isRunning,
formModal,
handlerUpdate,
modal,
handlerSmsConfirm,
handlerChange,
handlerInput,
inputHpno,
inputCrtfy,
okinput,
handlerWidthrow
}) => {
const history = useHistory(); const history = useHistory();
function handleUseHitory() { function handleUseHitory() {
history.push('/'); history.push('/');
} }
@ -29,24 +62,45 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<CardBody className='card-body-tab-cont'> <CardBody className='card-body-tab-cont'>
<TabPane tabId='1'> <TabPane tabId='1'>
<div className='search-info-box'> <div className='search-info-box'>
{userInfo ? {userInfo ? (
<Row> <Row>
<Col className='list-input' md='3' sm='12'> <Col className='list-input' md='3' sm='12'>
<FormGroup> <FormGroup>
<Label for='memberName'>이름</Label> <Label for='memberName'>이름</Label>
<Input type='text' id='memberName' bsSize='sm' placeholder='' value={userInfo.memberName || ''} disabled /> <Input
type='text'
id='memberName'
bsSize='sm'
placeholder=''
value={userInfo.memberName || ''}
disabled
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col className='list-input' md='3' sm='12'> <Col className='list-input' md='3' sm='12'>
<FormGroup> <FormGroup>
<Label for='brithdyDate'>생년월일</Label> <Label for='brithdyDate'>생년월일</Label>
<Input type='text' id='brithdyDate' bsSize='sm' placeholder='' value={userInfo.brthdyDate || ""} disabled /> <Input
type='text'
id='brithdyDate'
bsSize='sm'
placeholder=''
value={userInfo.brthdyDate || ''}
disabled
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col className='list-input' md='3' sm='12'> <Col className='list-input' md='3' sm='12'>
<FormGroup> <FormGroup>
<Label for='cenderCD'>성별</Label> <Label for='cenderCD'>성별</Label>
<Input type='select' name='select' bsSize='sm' id='cenderCD' value={userInfo.genderCd || ""} disabled > <Input
type='select'
name='select'
bsSize='sm'
id='cenderCD'
value={userInfo.genderCd || ''}
disabled
>
<option>남자</option> <option>남자</option>
<option>여자</option> <option>여자</option>
</Input> </Input>
@ -55,7 +109,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<Col className='list-input' md='3' sm='12'> <Col className='list-input' md='3' sm='12'>
<FormGroup> <FormGroup>
<Label for='cntryCD'>국가코드</Label> <Label for='cntryCD'>국가코드</Label>
<Input type='select' name='select' bsSize='sm' id='cntryCD' > <Input
type='select'
name='select'
bsSize='sm'
id='cntryCD'
>
<option>대한민국</option> <option>대한민국</option>
</Input> </Input>
</FormGroup> </FormGroup>
@ -63,13 +122,28 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<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' bsSize='sm' placeholder='' value={userInfo.userId || ""} disabled /> <Input
type='text'
id='userId'
bsSize='sm'
placeholder=''
value={userInfo.userId || ''}
disabled
/>
</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' name='email' bsSize='sm' placeholder='' defaultValue={userInfo.email} onChange={(e) => handlerInput(e)} /> <Input
type='text'
id='email'
name='email'
bsSize='sm'
placeholder=''
defaultValue={userInfo.email}
onChange={e => handlerInput(e)}
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col className='list-input' md='3' sm='12'> <Col className='list-input' md='3' sm='12'>
@ -77,12 +151,24 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<Label className='form-label' for='clncd'> <Label className='form-label' for='clncd'>
휴대폰 번호 휴대폰 번호
</Label> </Label>
<div className='user-phone-btn' > <div className='user-phone-btn'>
<Button.Ripple type='button' color='primary' onClick={handler}> <Button.Ripple
type='button'
color='primary'
onClick={handler}
>
<span className='d-sm-inline-block'>변경</span> <span className='d-sm-inline-block'>변경</span>
</Button.Ripple> </Button.Ripple>
</div> </div>
<Input type='number' name='clncd' id='hpno' bsSize='sm' placeholder='' disabled value={!okinput ? userInfo.hpno || "" : inputHpno } /> <Input
type='number'
name='clncd'
id='hpno'
bsSize='sm'
placeholder=''
disabled
value={!okinput ? userInfo.hpno || '' : inputHpno}
/>
<div> <div>
<Modal <Modal
isOpen={formModal} isOpen={formModal}
@ -95,23 +181,51 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<ModalBody> <ModalBody>
<div className='modal-box'> <div className='modal-box'>
<p className='ti'>휴대폰 번호 변경</p> <p className='ti'>휴대폰 번호 변경</p>
<p className='txt'>변경할 휴대폰 번호로 인증을 완료해 주세요.</p> <p className='txt'>
변경할 휴대폰 번호로 인증을 완료해 주세요.
</p>
</div> </div>
<Row> <Row>
<Col className='list-input' md='12'> <Col className='list-input' md='12'>
<FormGroup> <FormGroup>
<Row className='input-inline-btn'> <Row className='input-inline-btn'>
<Col md='8'> <Col md='8'>
<Label className='form-label' for='hpno'>휴대폰 번호</Label> <Label
<Input type='number' name='hpno' id='hpno' bsSize='sm' value={inputHpno} onChange={handlerChange} placeholder='01012345678' /> className='form-label'
for='hpno'
>
휴대폰 번호
</Label>
<Input
type='number'
name='hpno'
id='hpno'
bsSize='sm'
value={inputHpno}
onChange={handlerChange}
placeholder='01012345678'
/>
</Col> </Col>
<Col md='4' xs='12'> <Col md='4' xs='12'>
{/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> <span
남은시간 {minutes_Counter}:{seconds_Counter} 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> </span>
<Button.Ripple type='button' color='secondary' onClick={handlerSmsSend}>
<span className='d-sm-inline-block'>인증번호 발송</span>
</Button.Ripple> </Button.Ripple>
</Col> </Col>
</Row> </Row>
@ -121,7 +235,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<FormGroup> <FormGroup>
<Row className='input-inline-btn'> <Row className='input-inline-btn'>
<Col md='8'> <Col md='8'>
<Label className='form-label' for='crtfyNo'>인증번호</Label> <Label
className='form-label'
for='crtfyNo'
>
인증번호
</Label>
<Input <Input
type='number' type='number'
name='crtfyhpNo' name='crtfyhpNo'
@ -129,11 +248,9 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
bsSize='sm' bsSize='sm'
value={inputCrtfy} value={inputCrtfy}
onChange={handlerChange} onChange={handlerChange}
{...isRunning ? {...(isRunning
{} ? {}
: : { disabled: true })}
{disabled:true}
}
/> />
</Col> </Col>
<Col md='4' xs='12'> <Col md='4' xs='12'>
@ -141,13 +258,13 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
type='button' type='button'
color='secondary' color='secondary'
onClick={handlerSmsConfirm} onClick={handlerSmsConfirm}
{...isRunning ? {...(isRunning
{} ? {}
: : { disabled: true })}
{disabled:true}
}
> >
<span className='d-sm-inline-block'>인증하기</span> <span className='d-sm-inline-block'>
인증하기
</span>
</Button.Ripple> </Button.Ripple>
</Col> </Col>
</Row> </Row>
@ -156,10 +273,7 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
</Row> </Row>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button <Button color='primary' onClick={handler}>
color='primary'
onClick={handler}
>
확인 확인
</Button> </Button>
</ModalFooter> </ModalFooter>
@ -168,24 +282,43 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
: <></> ) : (
} <></>
)}
</div> </div>
<div className='d-flex justify-content-between'> <div className='d-flex justify-content-between'>
<div> <div>
<Button.Ripple className='mr-1' color='primary' size='sm' onClick={handlerUpdate}>저장</Button.Ripple> <Button.Ripple
<Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple> className='mr-1'
color='primary'
size='sm'
onClick={handlerUpdate}
>
저장
</Button.Ripple>
<Button.Ripple
color='danger'
size='sm'
onClick={handleUseHitory}
>
취소
</Button.Ripple>
</div> </div>
<div> <div>
<Button.Ripple color='danger' size='sm'>회원탈퇴</Button.Ripple> <Button.Ripple
color='danger'
size='sm'
onClick={() => handlerWidthrow()}
>
회원탈퇴
</Button.Ripple>
</div> </div>
</div> </div>
</TabPane> </TabPane>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
</Row> </Row>
) );
} };
export default AccountMypageForm; export default AccountMypageForm;

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

@ -1,33 +1,54 @@
// ** React Imports // ** React Imports
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom' import { useParams, Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux';
// ** Styles // ** Styles
import '../../../assets/css/custom.css'; import '../../../assets/css/custom.css';
// ** Third Party Components // ** Third Party Components
import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' import { User, Info, CreditCard, Lock, Check, X } from 'react-feather';
import { import {
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, Card,
Modal, ModalHeader, ModalBody, ModalFooter CardBody,
} from 'reactstrap' Row,
Col,
Nav,
NavItem,
NavLink,
TabContent,
TabPane,
Alert,
FormGroup,
Form,
Input,
Label,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
import { accountApi } from '../../../modules/account/register/apis/accountApi'; import { accountApi } from '../../../modules/account/register/apis/accountApi';
import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm'; import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm';
import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm'; import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm';
import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction'; import {
userPageAction,
userupdateAction
} from '../../../modules/account/login/actions/authAction';
import { MessageErrorModal } from '../../../components/message/MessageErrorModal'; import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
import { MessageInfoModal } from '../../../components/message/MessageInfoModal'; import { MessageInfoModal } from '../../../components/message/MessageInfoModal';
import { USER_LIST } from '../../../modules/basis/group/actions/basisGroupAction'; import { USER_LIST } from '../../../modules/basis/group/actions/basisGroupAction';
import { ConfirmModal } from '../../../components/modal/ConfirmModal';
// ** Function to toggle tabs // ** Function to toggle tabs
const AccountMypageContainer = () => { const AccountMypageContainer = () => {
const [activeTab, setActiveTab] = useState('1'), const [activeTab, setActiveTab] = useState('1'),
store = useSelector(state => state.users), store = useSelector(state => state.users),
dispatch = useDispatch(), dispatch = useDispatch(),
{ id } = useParams() { id } = useParams();
const toggle = tab => setActiveTab(tab) const toggle = tab => setActiveTab(tab);
const [formModal, setFormModal] = useState(false) const [formModal, setFormModal] = useState(false);
const { userPage } = useSelector(state => state.UserPageState); const { userPage } = useSelector(state => state.UserPageState);
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
const { userPwPage } = useSelector(state => state.UserPwState); const { userPwPage } = useSelector(state => state.UserPwState);
@ -44,7 +65,7 @@ const AccountMypageContainer = () => {
const [sendCount, setSendCount] = useState(0); const [sendCount, setSendCount] = useState(0);
const [isCrtfy, setIsCrtfy] = useState(false); const [isCrtfy, setIsCrtfy] = useState(false);
const [okinput, setOkinput] = useState(false) const [okinput, setOkinput] = useState(false);
const [okcheck, setOkcheck] = useState(''); const [okcheck, setOkcheck] = useState('');
const [modal, setModal] = useState({ const [modal, setModal] = useState({
@ -53,6 +74,12 @@ const AccountMypageContainer = () => {
desc: '', desc: '',
color: '' color: ''
}); });
const [quite, setQuite] = useState({
isOpen: false,
title: '',
desc: '',
color: ''
});
const timerStart = count => { const timerStart = count => {
let minutes, seconds; let minutes, seconds;
@ -77,7 +104,7 @@ const AccountMypageContainer = () => {
title: '인증번호 만료', title: '인증번호 만료',
desc: '인증번호가 만료되었습니다.', desc: '인증번호가 만료되었습니다.',
color: 'modal-danger' color: 'modal-danger'
}) });
} }
}, 1000); }, 1000);
@ -89,9 +116,9 @@ const AccountMypageContainer = () => {
}; };
useEffect(() => { useEffect(() => {
if (userInfo) { if (userInfo) {
setOkcheck(!okinput ? userInfo.hpno : inputHpno) setOkcheck(!okinput ? userInfo.hpno : inputHpno);
} }
}, [userInfo]) }, [userInfo]);
//휴대폰 인증번호 보내기 //휴대폰 인증번호 보내기
const handlerSmsSend = async () => { const handlerSmsSend = async () => {
@ -115,13 +142,13 @@ const AccountMypageContainer = () => {
}); });
return; return;
} }
if(inputHpno.length < 11) { if (inputHpno.length < 11) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '올바른 번호를 입력해 주세요.', desc: '올바른 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
@ -208,33 +235,30 @@ const AccountMypageContainer = () => {
title: '인증번호 인증', title: '인증번호 인증',
desc: '인증번호가 잘못되었습니다.', desc: '인증번호가 잘못되었습니다.',
color: 'modal-danger' color: 'modal-danger'
}) });
} } else if (res?.data.code === 0) {
else if (res?.data.code === 0) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '인증번호가 발송되었습니다.', desc: '인증번호가 발송되었습니다.',
color: 'modal-primary' color: 'modal-primary'
}) });
} else { } else {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 성공', title: '인증번호 성공',
desc: '인증되었습니다', desc: '인증되었습니다',
color: 'modal-primary' color: 'modal-primary'
}) });
setOkinput(!okinput); setOkinput(!okinput);
} }
setIsRunning(true); setIsRunning(true);
setIsCrtfy(true); setIsCrtfy(true);
}; };
useEffect(() => { useEffect(() => {
if (userPage) if (userPage) setUserInfo(userPage[0]);
setUserInfo(userPage[0]) }, [userPage]);
}, [userPage])
const handlerInput = e => { const handlerInput = e => {
const { name, value } = e.target; const { name, value } = e.target;
@ -251,28 +275,28 @@ const AccountMypageContainer = () => {
}, []); }, []);
const handler = () => { const handler = () => {
setFormModal(!formModal) setFormModal(!formModal);
} };
let hpno = ''; let hpno = '';
let crtfyhp = ''; let crtfyhp = '';
const handlerChange = (e) => { const handlerChange = e => {
const { name, value } = e.target; const { name, value } = e.target;
if (name == 'hpno') { if (name == 'hpno') {
const regex = /^[0-9]{0,11}$/; const regex = /^[0-9]{0,11}$/;
if(regex.test(value)){ if (regex.test(value)) {
hpno = value; hpno = value;
setInputHpno(hpno) setInputHpno(hpno);
} }
} else if (name == 'crtfyhpNo') { } else if (name == 'crtfyhpNo') {
const regex = /^[0-9]{0,6}$/; const regex = /^[0-9]{0,6}$/;
if(regex.test(value)) { if (regex.test(value)) {
crtfyhp = value; crtfyhp = value;
setInputCrtfy(crtfyhp) setInputCrtfy(crtfyhp);
}
} }
} }
};
//업데이트 //업데이트
const handlerUpdate = () => { const handlerUpdate = () => {
const param = { const param = {
@ -280,11 +304,24 @@ const AccountMypageContainer = () => {
email: userInfo.email, email: userInfo.email,
updateUserId: userInfo.userId, updateUserId: userInfo.userId,
hpno: okcheck hpno: okcheck
} };
dispatch(userupdateAction.request(param)); dispatch(userupdateAction.request(param));
}; };
const handlerTest = () => {
setQuite({
isOpen: true,
title: '탈퇴 확인',
desc: '정말로 탈퇴 하시겠습니까?'
});
return;
};
const waitwait = () => {
alert('아직 탈퇴 못해용~');
};
return ( return (
<div className='pal-card'> <div className='pal-card'>
<div className='card-body-tab-menu'> <div className='card-body-tab-menu'>
@ -298,12 +335,16 @@ const AccountMypageContainer = () => {
<NavItem> <NavItem>
<NavLink active={activeTab === '2'} onClick={() => toggle('2')}> <NavLink active={activeTab === '2'} onClick={() => toggle('2')}>
<Lock size={14} /> <Lock size={14} />
<span className='align-middle d-none d-sm-block'>비밀번호 변경</span> <span className='align-middle d-none d-sm-block'>
비밀번호 변경
</span>
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
</div> </div>
{activeTab == 1 ? <AccountMypageForm {activeTab == 1 ? (
<>
<AccountMypageForm
userInfo={userInfo} userInfo={userInfo}
handler={handler} handler={handler}
formModal={formModal} formModal={formModal}
@ -320,17 +361,19 @@ const AccountMypageContainer = () => {
seconds_Counter={seconds_Counter} seconds_Counter={seconds_Counter}
handlerSmsSend={handlerSmsSend} handlerSmsSend={handlerSmsSend}
isCrtfy={isCrtfy} isCrtfy={isCrtfy}
handlerWidthrow={handlerTest}
/> />
: <ConfirmModal
<></> modal={quite}
} setModal={setQuite}
{activeTab == 2 ? handlerConfirm={waitwait}
<AccountMypagePwForm color='danger'
user={user}
/> />
: </>
) : (
<></> <></>
} )}
{activeTab == 2 ? <AccountMypagePwForm user={user} /> : <></>}
<div className='vertically-centered-modal'> <div className='vertically-centered-modal'>
<Modal <Modal
isOpen={modal.isOpen} isOpen={modal.isOpen}
@ -357,6 +400,6 @@ const AccountMypageContainer = () => {
<MessageErrorModal /> <MessageErrorModal />
<MessageInfoModal /> <MessageInfoModal />
</div> </div>
) );
} };
export default AccountMypageContainer; export default AccountMypageContainer;

Write Preview
Loading…
Cancel
Save