sanguu
2 years ago
5 changed files with 586 additions and 384 deletions
@ -1,362 +1,412 @@
|
||||
// ** 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() |
||||
|
||||
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); |
||||
|
||||
const [userInfo, setUserInfo] = useState(); |
||||
|
||||
const [inputHpno, setInputHpno] = 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 [okcheck, setOkcheck] = useState(''); |
||||
|
||||
const [modal, setModal] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
desc: '', |
||||
color: '' |
||||
}); |
||||
const [activeTab, setActiveTab] = useState('1'), |
||||
store = useSelector(state => state.users), |
||||
dispatch = useDispatch(), |
||||
{ id } = useParams(); |
||||
|
||||
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('');
|
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 만료', |
||||
desc: '인증번호가 만료되었습니다.', |
||||
color: 'modal-danger' |
||||
}) |
||||
} |
||||
}, 1000); |
||||
|
||||
setTimer(timer); |
||||
|
||||
return () => { |
||||
clearInterval(timer); |
||||
}; |
||||
}; |
||||
useEffect(() => { |
||||
if (userInfo) { |
||||
setOkcheck(!okinput ? userInfo.hpno : inputHpno) |
||||
}
|
||||
}, [userInfo]) |
||||
|
||||
//휴대폰 인증번호 보내기
|
||||
const handlerSmsSend = async () => { |
||||
// const vData = getValues();
|
||||
|
||||
if (!inputHpno) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '휴대폰 번호를 입력해 주세요.', |
||||
color: 'modal-danger' |
||||
}); |
||||
return; |
||||
} |
||||
if (sendCount >= 3) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호 발송은 3회까지만 가능합니다.', |
||||
color: 'modal-danger' |
||||
}); |
||||
return; |
||||
} |
||||
if(inputHpno.length < 11) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '올바른 번호를 입력해 주세요.', |
||||
color: 'modal-danger' |
||||
}) |
||||
return; |
||||
} |
||||
|
||||
const res = await accountApi.crtfyhp(inputHpno); |
||||
|
||||
if (!res.data.result) { |
||||
if (res.data.code === -1) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '이미 가입된 휴대폰입니다.', |
||||
color: 'modal-danger' |
||||
}); |
||||
} else { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호 발송을 실패하였습니다.', |
||||
color: 'modal-danger' |
||||
}); |
||||
} |
||||
return; |
||||
} else { |
||||
{ |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호를 발송했습니다.', |
||||
color: 'modal-primary' |
||||
}); |
||||
} |
||||
} |
||||
// console.log(res);
|
||||
if (isRunning) { |
||||
clearInterval(timer); |
||||
} |
||||
setIsRunning(true); |
||||
setSendCount(sendCount + 1); |
||||
timerStart(180); |
||||
|
||||
// handlerSmsSend();
|
||||
}; |
||||
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); |
||||
|
||||
const [userInfo, setUserInfo] = useState(); |
||||
|
||||
const [inputHpno, setInputHpno] = 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 [okcheck, setOkcheck] = useState(''); |
||||
|
||||
const [modal, setModal] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
desc: '', |
||||
color: '' |
||||
}); |
||||
const [quite, setQuite] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
desc: '', |
||||
color: '' |
||||
}); |
||||
|
||||
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); |
||||
|
||||
useEffect(() => { |
||||
// setIsRunning(true);
|
||||
if (isRunning) { |
||||
clearInterval(timer); |
||||
} |
||||
return () => { |
||||
clearInterval(timer); |
||||
// setIsRunning(false);
|
||||
}; |
||||
}, []); |
||||
|
||||
//휴대폰 인증하기
|
||||
const handlerSmsConfirm = async () => { |
||||
//const vData = getValues();
|
||||
|
||||
if (!inputHpno) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '휴대폰 번호를 입력해 주세요.', |
||||
color: 'modal-danger' |
||||
}); |
||||
|
||||
return false; |
||||
} |
||||
if (!inputCrtfy) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '인증번호를 입력해 주세요.', |
||||
color: 'modal-danger' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); |
||||
|
||||
if (!res.data.result) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '인증번호가 잘못되었습니다.', |
||||
color: 'modal-danger' |
||||
}) |
||||
} |
||||
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); |
||||
//타이머 끝
|
||||
if (--count < 0) { |
||||
clearInterval(timer); |
||||
setIsRunning(false); |
||||
setInputCrtfy('crtfyhpNo', ''); |
||||
// setCrtfyNo('');
|
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 만료', |
||||
desc: '인증번호가 만료되었습니다.', |
||||
color: 'danger' |
||||
}); |
||||
} |
||||
}, 1000); |
||||
|
||||
setTimer(timer); |
||||
|
||||
return () => { |
||||
clearInterval(timer); |
||||
}; |
||||
}; |
||||
useEffect(() => { |
||||
if (userInfo) { |
||||
setOkcheck(!okinput ? userInfo.hpno : inputHpno); |
||||
} |
||||
}, [userInfo]); |
||||
|
||||
//휴대폰 인증번호 보내기
|
||||
const handlerSmsSend = async () => { |
||||
// const vData = getValues();
|
||||
|
||||
useEffect(() => { |
||||
if (userPage) |
||||
setUserInfo(userPage[0]) |
||||
}, [userPage]) |
||||
if (!inputHpno) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '휴대폰 번호를 입력해 주세요.', |
||||
color: 'danger' |
||||
}); |
||||
return; |
||||
} |
||||
if (sendCount >= 3) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호 발송은 3회까지만 가능합니다.', |
||||
color: 'danger' |
||||
}); |
||||
return; |
||||
} |
||||
if (inputHpno.length < 11) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '올바른 번호를 입력해 주세요.', |
||||
color: 'danger' |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
const res = await accountApi.crtfyhp(inputHpno); |
||||
|
||||
const handlerInput = e => { |
||||
const { name, value } = e.target; |
||||
setUserInfo({ |
||||
...userInfo, |
||||
[name]: value |
||||
if (!res.data.result) { |
||||
if (res.data.code === -1) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '이미 가입된 휴대폰입니다.', |
||||
color: 'danger' |
||||
}); |
||||
} else { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호 발송을 실패하였습니다.', |
||||
color: 'danger' |
||||
}); |
||||
} |
||||
return; |
||||
} else { |
||||
{ |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호를 발송했습니다.', |
||||
color: 'primary' |
||||
}); |
||||
} |
||||
} |
||||
// console.log(res);
|
||||
if (isRunning) { |
||||
clearInterval(timer); |
||||
} |
||||
setIsRunning(true); |
||||
setSendCount(sendCount + 1); |
||||
timerStart(180); |
||||
|
||||
// handlerSmsSend();
|
||||
}; |
||||
|
||||
useEffect(() => { |
||||
// setIsRunning(true);
|
||||
if (isRunning) { |
||||
clearInterval(timer); |
||||
} |
||||
return () => { |
||||
clearInterval(timer); |
||||
// setIsRunning(false);
|
||||
}; |
||||
}, []); |
||||
|
||||
//휴대폰 인증하기
|
||||
const handlerSmsConfirm = async () => { |
||||
//const vData = getValues();
|
||||
|
||||
useEffect(() => { |
||||
if (user) { |
||||
dispatch(userPageAction.request(user.cstmrSno)); |
||||
} |
||||
}, []); |
||||
if (!inputHpno) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '휴대폰 번호를 입력해 주세요.', |
||||
color: 'danger' |
||||
}); |
||||
|
||||
const handler = () => { |
||||
setFormModal(!formModal) |
||||
return false; |
||||
} |
||||
if (!inputCrtfy) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '인증번호를 입력해 주세요.', |
||||
color: 'danger' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
let hpno = ''; |
||||
let crtfyhp = ''; |
||||
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) |
||||
} |
||||
} else if (name == 'crtfyhpNo') { |
||||
const regex = /^[0-9]{0,6}$/; |
||||
if(regex.test(value)) { |
||||
crtfyhp = value; |
||||
setInputCrtfy(crtfyhp) |
||||
} |
||||
} |
||||
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); |
||||
|
||||
if (!res.data.result) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 인증', |
||||
desc: '인증번호가 잘못되었습니다.', |
||||
color: 'danger' |
||||
}); |
||||
} else if (res?.data.code === 0) { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호가 발송되었습니다.', |
||||
color: 'primary' |
||||
}); |
||||
} else { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '인증번호 성공', |
||||
desc: '인증되었습니다', |
||||
color: 'primary' |
||||
}); |
||||
setOkinput(!okinput); |
||||
} |
||||
//업데이트
|
||||
const handlerUpdate = () => { |
||||
const param = { |
||||
cstmrSno: user.cstmrSno, |
||||
email: userInfo.email, |
||||
updateUserId: userInfo.userId, |
||||
hpno: okcheck |
||||
} |
||||
|
||||
dispatch(userupdateAction.request(param)); |
||||
setIsRunning(true); |
||||
setIsCrtfy(true); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (userPage) setUserInfo(userPage[0]); |
||||
}, [userPage]); |
||||
|
||||
const handlerInput = e => { |
||||
const { name, value } = e.target; |
||||
setUserInfo({ |
||||
...userInfo, |
||||
[name]: value |
||||
}); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (user) { |
||||
dispatch(userPageAction.request(user.cstmrSno)); |
||||
} |
||||
}, []); |
||||
|
||||
const handler = () => { |
||||
setFormModal(!formModal); |
||||
}; |
||||
|
||||
let hpno = ''; |
||||
let crtfyhp = ''; |
||||
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); |
||||
} |
||||
} else if (name == 'crtfyhpNo') { |
||||
const regex = /^[0-9]{0,6}$/; |
||||
if (regex.test(value)) { |
||||
crtfyhp = value; |
||||
setInputCrtfy(crtfyhp); |
||||
} |
||||
} |
||||
}; |
||||
//업데이트
|
||||
const handlerUpdate = () => { |
||||
const param = { |
||||
cstmrSno: user.cstmrSno, |
||||
email: userInfo.email, |
||||
updateUserId: userInfo.userId, |
||||
hpno: okcheck |
||||
}; |
||||
|
||||
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 ? <AccountMypageForm |
||||
userInfo={userInfo} |
||||
handler={handler} |
||||
formModal={formModal} |
||||
handlerUpdate={handlerUpdate} |
||||
handlerInput={handlerInput} |
||||
inputHpno={inputHpno} |
||||
inputCrtfy={inputCrtfy} |
||||
okinput={okinput} |
||||
handlerChange={handlerChange} |
||||
handlerSmsConfirm={handlerSmsConfirm} |
||||
modal={modal} |
||||
isRunning={isRunning} |
||||
minutes_Counter={minutes_Counter} |
||||
seconds_Counter={seconds_Counter} |
||||
handlerSmsSend={handlerSmsSend} |
||||
isCrtfy={isCrtfy} |
||||
/> |
||||
: |
||||
<></> |
||||
} |
||||
{activeTab == 2 ? |
||||
<AccountMypagePwForm |
||||
user={user} |
||||
/> |
||||
: |
||||
<></> |
||||
} |
||||
<div className='vertically-centered-modal'> |
||||
<Modal |
||||
isOpen={modal.isOpen} |
||||
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
modalClassName={modal.color} |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader |
||||
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
> |
||||
{modal.title} |
||||
</ModalHeader> |
||||
<ModalBody>{modal.desc}</ModalBody> |
||||
<ModalFooter> |
||||
<Button |
||||
color='danger' |
||||
onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
> |
||||
확인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
<MessageErrorModal /> |
||||
<MessageInfoModal /> |
||||
</div> |
||||
) |
||||
} |
||||
dispatch(userupdateAction.request(param)); |
||||
}; |
||||
|
||||
const handlerTest = () => { |
||||
setQuite({ |
||||
isOpen: true, |
||||
title: '탈퇴 확인', |
||||
desc: '정말로 탈퇴 하시겠습니까?' |
||||
}); |
||||
return; |
||||
}; |
||||
|
||||
const waitwait = () => { |
||||
// alert('아직 탈퇴 못해용~');
|
||||
setModal({ |
||||
isOpen: true, |
||||
title: '탈퇴 확인', |
||||
desc: '탈퇴가 완료되었습니다.', |
||||
color: 'primary' |
||||
}); |
||||
return; |
||||
}; |
||||
|
||||
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 ? ( |
||||
<> |
||||
<AccountMypageForm |
||||
userInfo={userInfo} |
||||
handler={handler} |
||||
formModal={formModal} |
||||
handlerUpdate={handlerUpdate} |
||||
handlerInput={handlerInput} |
||||
inputHpno={inputHpno} |
||||
inputCrtfy={inputCrtfy} |
||||
okinput={okinput} |
||||
handlerChange={handlerChange} |
||||
handlerSmsConfirm={handlerSmsConfirm} |
||||
modal={modal} |
||||
isRunning={isRunning} |
||||
minutes_Counter={minutes_Counter} |
||||
seconds_Counter={seconds_Counter} |
||||
handlerSmsSend={handlerSmsSend} |
||||
isCrtfy={isCrtfy} |
||||
handlerWidthrow={handlerTest} |
||||
/> |
||||
<ConfirmModal |
||||
modal={quite} |
||||
setModal={setQuite} |
||||
handlerConfirm={waitwait} |
||||
color='danger' |
||||
/> |
||||
</> |
||||
) : ( |
||||
<></> |
||||
)} |
||||
{activeTab == 2 ? <AccountMypagePwForm user={user} /> : <></>} |
||||
<div className='vertically-centered-modal'> |
||||
<Modal |
||||
isOpen={modal.isOpen} |
||||
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
modalClassName={'modal-' + `${modal.color}`} |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader |
||||
toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
> |
||||
{modal.title} |
||||
</ModalHeader> |
||||
<ModalBody>{modal.desc}</ModalBody> |
||||
<ModalFooter> |
||||
<Button |
||||
color={modal.color} |
||||
onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
||||
> |
||||
확인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
<MessageErrorModal /> |
||||
<MessageInfoModal /> |
||||
</div> |
||||
); |
||||
}; |
||||
export default AccountMypageContainer; |
||||
|
||||
Loading…
Reference in new issue