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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      src/components/account/mypage/AccountMypageForm.js
  2. 131
      src/containers/account/mypage/AccountMypageContainer.js

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

@ -1,10 +1,27 @@
// ** React Imports
import { useState, useEffect } from 'react'
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
} from 'reactstrap'
Card,
CardBody,
Row,
Col,
Nav,
NavItem,
NavLink,
TabContent,
TabPane,
Alert,
FormGroup,
Form,
Input,
Label,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
// ** Styles
import '../../../assets/css/custom.css';
@ -12,12 +29,28 @@ import '../../../assets/css/custom.css';
//const [detailData, setDetailData] = useState(userPage.UserPageData);
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();
function handleUseHitory() {
history.push('/');
}
@ -29,24 +62,45 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<CardBody className='card-body-tab-cont'>
<TabPane tabId='1'>
<div className='search-info-box'>
{userInfo ?
{userInfo ? (
<Row>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<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>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<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>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<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>
</Input>
@ -55,7 +109,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for='cntryCD'>국가코드</Label>
<Input type='select' name='select' bsSize='sm' id='cntryCD' >
<Input
type='select'
name='select'
bsSize='sm'
id='cntryCD'
>
<option>대한민국</option>
</Input>
</FormGroup>
@ -63,13 +122,28 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<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>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<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>
</Col>
<Col className='list-input' md='3' sm='12'>
@ -78,11 +152,23 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
휴대폰 번호
</Label>
<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>
</Button.Ripple>
</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>
<Modal
isOpen={formModal}
@ -95,23 +181,51 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<ModalBody>
<div className='modal-box'>
<p className='ti'>휴대폰 번호 변경</p>
<p className='txt'>변경할 휴대폰 번호로 인증을 완료해 주세요.</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' />
<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
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 type='button' color='secondary' onClick={handlerSmsSend}>
<span className='d-sm-inline-block'>인증번호 발송</span>
</Button.Ripple>
</Col>
</Row>
@ -121,7 +235,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
<FormGroup>
<Row className='input-inline-btn'>
<Col md='8'>
<Label className='form-label' for='crtfyNo'>인증번호</Label>
<Label
className='form-label'
for='crtfyNo'
>
인증번호
</Label>
<Input
type='number'
name='crtfyhpNo'
@ -129,11 +248,9 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
bsSize='sm'
value={inputCrtfy}
onChange={handlerChange}
{...isRunning ?
{}
:
{disabled:true}
}
{...(isRunning
? {}
: { disabled: true })}
/>
</Col>
<Col md='4' xs='12'>
@ -141,13 +258,13 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
type='button'
color='secondary'
onClick={handlerSmsConfirm}
{...isRunning ?
{}
:
{disabled:true}
}
{...(isRunning
? {}
: { disabled: true })}
>
<span className='d-sm-inline-block'>인증하기</span>
<span className='d-sm-inline-block'>
인증하기
</span>
</Button.Ripple>
</Col>
</Row>
@ -156,10 +273,7 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
</Row>
</ModalBody>
<ModalFooter>
<Button
color='primary'
onClick={handler}
>
<Button color='primary' onClick={handler}>
확인
</Button>
</ModalFooter>
@ -168,24 +282,43 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
</FormGroup>
</Col>
</Row>
: <></>
}
) : (
<></>
)}
</div>
<div className='d-flex justify-content-between'>
<div>
<Button.Ripple className='mr-1' color='primary' size='sm' onClick={handlerUpdate}>저장</Button.Ripple>
<Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple>
<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>
<Button.Ripple color='danger' size='sm'>회원탈퇴</Button.Ripple>
<Button.Ripple
color='danger'
size='sm'
onClick={() => handlerWidthrow()}
>
회원탈퇴
</Button.Ripple>
</div>
</div>
</TabPane>
</CardBody>
</Card>
</Col>
</Row>
)
}
);
};
export default AccountMypageForm;

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

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

Write Preview
Loading…
Cancel
Save