sanguu
2 years ago
14 changed files with 365 additions and 57 deletions
@ -0,0 +1,156 @@
|
||||
// ** React Imports
|
||||
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' |
||||
|
||||
// ** Styles
|
||||
import '../../../assets/css/custom.css'; |
||||
|
||||
//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
|
||||
//const [detailData, setDetailData] = useState(userPage.UserPageData);
|
||||
|
||||
const MypageForm = ({ userInfo, formModal }) => { |
||||
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 || ""} disabled /> |
||||
</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={userInfo[0].email || ""} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label className='form-label' for='test'> |
||||
휴대폰 번호 |
||||
</Label> |
||||
<div className='user-phone-btn' > |
||||
<Button.Ripple type='button' color='primary' onClick={() => setFormModal(!formModal)}> |
||||
<span className='d-sm-inline-block'>변경</span> |
||||
</Button.Ripple> |
||||
</div> |
||||
<Input type='number' name='test' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} /> |
||||
<div> |
||||
<Modal |
||||
isOpen={formModal} |
||||
toggle={() => setFormModal(!formModal)} |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader toggle={() => setFormModal(!formModal)}> |
||||
휴대폰번호 변경 |
||||
</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='time d-none'> |
||||
남은시간 : 3:00 |
||||
</span> |
||||
<Button.Ripple type='button' color='secondary'> |
||||
<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='verifCode'>인증번호</Label> |
||||
<Input type='number' name='test' id='verifCode' size='sm' /> |
||||
</Col> |
||||
<Col md='4' xs='12'> |
||||
<Button.Ripple type='button' color='secondary'> |
||||
<span className='d-sm-inline-block'>인증하기</span> |
||||
</Button.Ripple> |
||||
</Col> |
||||
</Row> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button |
||||
color='primary' |
||||
onClick={() => setFormModal(!formModal)} |
||||
> |
||||
확인 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
: <></> |
||||
} |
||||
</div> |
||||
<div className='d-flex align-items-center'> |
||||
<Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple> |
||||
<Button.Ripple color='danger' size='sm'>취소</Button.Ripple> |
||||
</div> |
||||
</TabPane> |
||||
|
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
) |
||||
} |
||||
export default MypageForm; |
||||
@ -0,0 +1,51 @@
|
||||
// ** React Imports
|
||||
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' |
||||
|
||||
// ** Styles
|
||||
import '../../../assets/css/custom.css'; |
||||
|
||||
const MypagePwForm = ({ userInfo, formModal }) => { |
||||
return ( |
||||
<TabPane tabId='2'> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Form> |
||||
<Label for='userPswd'>기존 비밀번호</Label> |
||||
<Input type='password' id='userPswd' size='sm' autocomplete='off' placeholder='' /> |
||||
</Form> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Form> |
||||
<Label for='newPswd'>새로운 비밀번호</Label> |
||||
<Input type='password' id='newPswd' size='sm' autocomplete='off' placeholder='' /> |
||||
</Form> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Form> |
||||
<Label for='pswdCheck'>새로운 비밀번호 확인</Label> |
||||
<Input type='password' id='pswdCheck' size='sm' autocomplete='off' placeholder='' /> |
||||
</Form> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='d-flex align-items-center'> |
||||
<Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple> |
||||
<Button.Ripple color='danger' size='sm'>취소</Button.Ripple> |
||||
</div> |
||||
</TabPane> |
||||
) |
||||
} |
||||
export default MypagePwForm; |
||||
|
||||
@ -0,0 +1,76 @@
|
||||
// ** React Imports
|
||||
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 { |
||||
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
||||
Modal, ModalHeader, ModalBody, ModalFooter |
||||
} from 'reactstrap' |
||||
|
||||
import MypagePwForm from '../../../components/account/mypage/MypagePwForm'; |
||||
import MypageForm from '../../../components/account/mypage/MypageForm'; |
||||
import { userPageAction } from '../../../modules/account/login/actions/authAction'; |
||||
|
||||
// ** Function to toggle tabs
|
||||
const MypageContainer = () => { |
||||
const [activeTab, setActiveTab] = useState('1'), |
||||
store = useSelector(state => state.users), |
||||
dispatch = useDispatch(), |
||||
{ id } = useParams() |
||||
|
||||
const toggle = tab => setActiveTab(tab) |
||||
const [formModal, setFormModal] = useState(false) |
||||
const { userPage } = useSelector(state => state.UserPageState); |
||||
const { user } = useSelector(state => state.authState); |
||||
const [userInfo, setUserInfo] = useState(); |
||||
|
||||
|
||||
useEffect(() => { |
||||
setUserInfo(userPage) |
||||
}, [userPage]) |
||||
|
||||
useEffect(() => { |
||||
if (user) { |
||||
dispatch(userPageAction.request(user.cstmrSno)); |
||||
} |
||||
}, []); |
||||
|
||||
return ( |
||||
<div className='pal-card'> |
||||
<div className='card-body-tab-menu'> |
||||
<Nav pills> |
||||
<NavItem> |
||||
<NavLink active={activeTab === '1'} onClick={() => toggle('1')}> |
||||
<User size={14} /> |
||||
<span className='align-middle d-none d-sm-block'>내정보</span> |
||||
</NavLink> |
||||
</NavItem> |
||||
<NavItem> |
||||
<NavLink active={activeTab === '2'} onClick={() => toggle('2')}> |
||||
<Lock size={14} /> |
||||
<span className='align-middle d-none d-sm-block'>비밀번호 변경</span> |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
</div> |
||||
{activeTab == 1 ? <MypageForm |
||||
userInfo={userInfo} |
||||
toggle={toggle} |
||||
formModal={formModal} |
||||
/> |
||||
: |
||||
<></> |
||||
} |
||||
{activeTab == 2 ? |
||||
<MypagePwForm /> |
||||
: |
||||
<></> |
||||
} |
||||
</div> |
||||
) |
||||
} |
||||
export default MypageContainer; |
||||
@ -0,0 +1,14 @@
|
||||
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' |
||||
import React from 'react'; |
||||
import '../../assets/css/custom.css'; |
||||
import MypageContainer from '../../containers/analysis/mypage/MypageContainer'; |
||||
|
||||
const Mypage = props => { |
||||
return ( |
||||
<MypageContainer /> |
||||
); |
||||
}; |
||||
|
||||
export default Mypage; |
||||
Loading…
Reference in new issue