diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js index 990f6e2..c9b9945 100644 --- a/src/components/account/mypage/AccountMypageForm.js +++ b/src/components/account/mypage/AccountMypageForm.js @@ -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
- {userInfo ? + {userInfo ? ( - + - + - + @@ -55,7 +109,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han - + @@ -63,13 +122,28 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han - + - handlerInput(e)} /> + handlerInput(e)} + /> @@ -77,12 +151,24 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han -
- +
+ 변경
- +

휴대폰 번호 변경

-

변경할 휴대폰 번호로 인증을 완료해 주세요.

+

+ 변경할 휴대폰 번호로 인증을 완료해 주세요. +

- - + + {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} - - 남은시간 {minutes_Counter}:{seconds_Counter} + + 남은시간 {minutes_Counter}: + {seconds_Counter} - - 인증번호 발송 + + + 인증번호 발송 + @@ -121,7 +235,12 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han - + @@ -141,13 +258,13 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han type='button' color='secondary' onClick={handlerSmsConfirm} - {...isRunning ? - {} - : - {disabled:true} - } + {...(isRunning + ? {} + : { disabled: true })} > - 인증하기 + + 인증하기 + @@ -156,10 +273,7 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han - @@ -168,24 +282,43 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han - : <> - } + ) : ( + <> + )}
- 저장 - 취소 + + 저장 + + + 취소 +
- 회원탈퇴 + handlerWidthrow()} + > + 회원탈퇴 +
- - ) -} + ); +}; export default AccountMypageForm; diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index b60a4d8..7663667 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -1,362 +1,405 @@ // ** 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: '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; + } - useEffect(() => { - if (userPage) - setUserInfo(userPage[0]) - }, [userPage]) + 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: '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(); + }; + + 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: 'modal-danger' + }); - const handler = () => { - setFormModal(!formModal) + return false; } + if (!inputCrtfy) { + setModal({ + isOpen: true, + title: '인증번호 인증', + desc: '인증번호를 입력해 주세요.', + color: 'modal-danger' + }); + return false; + } + + const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); - 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) - } - } + 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); } - //업데이트 - 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 ( -
-
- -
- {activeTab == 1 ? - : - <> - } - {activeTab == 2 ? - - : - <> - } -
- setModal({ ...modal, isOpen: !modal.isOpen })} - modalClassName={modal.color} - className='modal-dialog-centered' - > - setModal({ ...modal, isOpen: !modal.isOpen })} - > - {modal.title} - - {modal.desc} - - {' '} - - -
- - -
- ) -} + dispatch(userupdateAction.request(param)); + }; + + const handlerTest = () => { + setQuite({ + isOpen: true, + title: '탈퇴 확인', + desc: '정말로 탈퇴 하시겠습니까?' + }); + return; + }; + + const waitwait = () => { + alert('아직 탈퇴 못해용~'); + }; + + return ( +
+
+ +
+ {activeTab == 1 ? ( + <> + + + + ) : ( + <> + )} + {activeTab == 2 ? : <>} +
+ setModal({ ...modal, isOpen: !modal.isOpen })} + modalClassName={modal.color} + className='modal-dialog-centered' + > + setModal({ ...modal, isOpen: !modal.isOpen })} + > + {modal.title} + + {modal.desc} + + {' '} + + +
+ + +
+ ); +}; export default AccountMypageContainer;