From 896c88d972e4decd1fc5122939a419a626183a45 Mon Sep 17 00:00:00 2001 From: sanguu Date: Wed, 7 Sep 2022 16:15:19 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80(?= =?UTF-8?q?=EC=B5=9C=EC=A2=85=EB=B3=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/mypage/AccountMypageForm.js | 173 +------------- .../account/mypage/AccountMypagePwForm.js | 9 +- .../account/register/AccountRegisterForm.js | 2 +- .../account/mypage/AccountMypageContainer.js | 223 +++++++++++++++++- .../account/register/apis/accountApi.ts | 1 - 5 files changed, 239 insertions(+), 169 deletions(-) diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js index 813f3e0..b9186b5 100644 --- a/src/components/account/mypage/AccountMypageForm.js +++ b/src/components/account/mypage/AccountMypageForm.js @@ -8,148 +8,20 @@ import { // ** Styles import '../../../assets/css/custom.css'; -import { accountApi } from '../../../modules/account/register/apis/accountApi'; //import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel'; //const [detailData, setDetailData] = useState(userPage.UserPageData); +import { useHistory } from 'react-router-dom'; -const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handlerInput }) => { - const [isRunning, setIsRunning] = useState(false); - const [sendCount, setSendCount] = useState(0); - const [isCrtfy, setIsCrtfy] = useState(false); - const [minutes_Counter, setMinutes_Counter] = useState('03'); - const [seconds_Counter, setSeconds_Counter] = useState('00'); - const [timer, setTimer] = useState(null); - const [modal, setModal] = useState({ - isOpen: false, - title: '', - desc: '' - }); +const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,handler,minutes_Counter, isRunning ,formModal, handlerUpdate,modal,handlerSmsConfirm,handlerChange,handlerInput,inputHpno,inputCrtfy,okinput}) => { - const timerStart = count => { - let minutes, seconds; + const history = useHistory(); - 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); - setValue('crtfyNo', ''); - // setCrtfyNo(''); - } - }, 1000); + function handleUseHitory() { + history.push('/'); + } - setTimer(timer); - - return () => { - clearInterval(timer); - }; - }; - //휴대폰 인증번호 보내기 - const handlerSmsSend = async () => { - // const vData = getValues(); - - if (!userInfo.clncd || !userInfo.hpno) { - setModal({ - isOpen: true, - title: '인증번호 발송', - desc: '휴대폰 번호를 입력 해주세요.' - }); - return; - } - - if (sendCount >= 3) { - setModal({ - isOpen: true, - title: '인증번호 발송', - desc: '인증번호 발송은 3회 까지만 가능합니다.' - }); - return; - } - - const res = await accountApi.crtfyhp(userInfo.hpno); - - if (!res.data.result) { - if (res.data.code === -1) { - setModal({ - isOpen: true, - title: '인증번호 발송', - desc: '이미 가입된 휴대폰 입니다.' - }); - } else { - setModal({ - isOpen: true, - title: '인증번호 발송', - desc: '인증번호 발송을 실패하였습니다.' - }); - } - return; - } - // console.log(res); - if (isRunning) { - clearInterval(timer); - } - setIsRunning(true); - setSendCount(sendCount + 1); - timerStart(180); - - // handlerSmsSend(); - }; - useEffect(() => { - // console.log('isRunning>>>', isRunning); - if (isRunning) { - clearInterval(timer); - } else { - // handlerSmsSend(); - } - - return () => { - clearInterval(timer); - }; - }, []); - - //휴대폰 인증하기 - const handlerSmsConfirm = async () => { - //const vData = getValues(); - - if (!userInfo.clncd || !userInfo.hpno) { - setModal({ - isOpen: true, - title: '인증번호 인증', - desc: '휴대폰 번호를 입력 해주세요.' - }); - - return false; - } - if (!userInfo.crtfyNo) { - setModal({ - isOpen: true, - title: '인증번호 인증', - desc: '인증번호 를 입력 해주세요.' - }); - return false; - } - - const res = await accountApi.crtfyhpConfirm(vData.hpno, vData.crtfyNo); - - if (!res.data.result) { - setModal({ - isOpen: true, - title: '인증번호 인증', - desc: '인증번호 가 잘못 되었습니다.' - }); - return; - } - setIsRunning(true); - setIsCrtfy(true); - }; return ( @@ -210,7 +82,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle 변경 - +
- + {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} @@ -250,7 +122,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle - + @@ -280,36 +152,13 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
저장 - 취소 + 취소
-
- setModal({ ...modal, isOpen: !modal.isOpen })} - modalClassName='modal-danger' - className='modal-dialog-centered' - > - setModal({ ...modal, isOpen: !modal.isOpen })} - > - {modal.title} - - {modal.desc} - - {' '} - - -
) } diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index a5a65f2..e973238 100644 --- a/src/components/account/mypage/AccountMypagePwForm.js +++ b/src/components/account/mypage/AccountMypagePwForm.js @@ -12,6 +12,7 @@ import { import '../../../assets/css/custom.css'; import classnames from 'classnames'; import { pwUpdateAction } from '../../../modules/account/login/actions/authAction'; +import { useHistory } from 'react-router-dom'; const SignupSchema = yup.object().shape({ userPswd: yup @@ -45,6 +46,12 @@ const AccountMypagePwForm = ({ user }) => { const onSubmit = data => { dispatch(pwUpdateAction.request(data)); } + const history = useHistory(); + + + function handleUseHitory(){ + history.push('/'); + } return (
@@ -81,7 +88,7 @@ const AccountMypagePwForm = ({ user }) => {
저장 - 취소 + 취소
diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index 4b3c972..b144b24 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -167,7 +167,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => { .oneOf([yup.ref('userPswd'), null], '비밀번호가 일치하지 않습니다.') }); - const { register, getValues, setValue, errors, handleSubmit } = useForm({ + const { register, getValues, setValuey, errors, handleSubmit } = useForm({ defaultValues: { userId: '', userPswd: '', diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index 5ed99dc..da21fa5 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -10,7 +10,7 @@ import { 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'; @@ -34,13 +34,184 @@ const AccountMypageContainer = () => { const [userInfo, setUserInfo] = useState(); + const [inputHpno, setInputHpno] = useState(''); + const [inputCrtfy, setInputCrtfy] = useState(''); + const [okinput, setOkinput] = useState(false) + const [okcheck, setOkcheck] = useState(''); + const [isRunning, setIsRunning] = useState(false); + const [sendCount, setSendCount] = useState(0); + const [isCrtfy, setIsCrtfy] = useState(false); + const [minutes_Counter, setMinutes_Counter] = useState('03'); + const [seconds_Counter, setSeconds_Counter] = useState('00'); + const [timer, setTimer] = useState(null); + + const [modal, setModal] = useState({ + isOpen: false, + title: '', + desc: '' + }); + + 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(''); + } + }, 1000); + + setTimer(timer); + + return () => { + clearInterval(timer); + }; + }; + + useEffect(() => { + if (userInfo) { + setOkcheck(!okinput ? userInfo.hpno : inputHpno) + console.log("okcheck>>>>>", okcheck); + } + }, [okinput]) + //휴대폰 인증번호 보내기 + const handlerSmsSend = async () => { + // const vData = getValues(); + + if (!inputHpno) { + setModal({ + isOpen: true, + title: '인증번호 발송', + desc: '휴대폰 번호를 입력 해주세요.' + }); + return; + } + if (sendCount >= 3) { + setModal({ + isOpen: true, + title: '인증번호 발송', + desc: '인증번호 발송은 3회 까지만 가능합니다.' + }); + return; + } + const res = await accountApi.crtfyhp(inputHpno); + + if (!res.data.result) { + if (res.data.code === -1) { + setModal({ + isOpen: true, + title: '인증번호 발송', + desc: '이미 가입된 휴대폰 입니다.' + }); + } else { + setModal({ + isOpen: true, + title: '인증번호 발송', + desc: '인증번호 발송을 실패하였습니다.' + }); + } + return; + } else { + { + setModal({ + isOpen: true, + title: '인증번호 발송', + desc: '인증번호를 발송했습니다.' + }); + } + } + // console.log(res); + if (isRunning) { + clearInterval(timer); + } + setIsRunning(true); + setSendCount(sendCount + 1); + timerStart(180); + + // handlerSmsSend(); + }; + useEffect(() => { + // console.log('isRunning>>>', isRunning); + if (isRunning) { + clearInterval(timer); + } else { + // handlerSmsSend(); + } + + return () => { + clearInterval(timer); + }; + }, []); + + //휴대폰 인증하기 + const handlerSmsConfirm = async () => { + //const vData = getValues(); + + if (!inputCrtfy || !inputHpno) { + setModal({ + isOpen: true, + title: '인증번호 인증', + desc: '휴대폰 번호를 입력 해주세요.' + }); + + return false; + } + if (!inputCrtfy) { + setModal({ + isOpen: true, + title: '인증번호 인증', + desc: '인증번호 를 입력 해주세요.' + }); + return false; + } + + const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); + + if (!res.data.result) { + setModal({ + isOpen: true, + title: '인증번호 인증', + desc: '인증번호 가 잘못 되었습니다.' + }) + } + 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]) + setUserInfo(userPage[0]) }, [userPage]) const handlerInput = e => { - const { name, value } = e.target; setUserInfo({ ...userInfo, @@ -58,12 +229,23 @@ const AccountMypageContainer = () => { setFormModal(!formModal) } + const handlerChange = (e) => { + const { name, value } = e.target; + + if (name == 'hpno') { + setInputHpno(value); + } else if (name == 'crtfyhpNo') { + setInputCrtfy(value); + } + } //업데이트 const handlerUpdate = () => { + debugger const param = { cstmrSno: user.cstmrSno, email: userInfo.email, updateUserId: userInfo.userId, + hpno: okcheck } dispatch(userupdateAction.request(param)); @@ -89,11 +271,21 @@ const AccountMypageContainer = () => { {activeTab == 1 ? : <> @@ -105,6 +297,29 @@ const AccountMypageContainer = () => { : <> } +
+ setModal({ ...modal, isOpen: !modal.isOpen })} + modalClassName='modal-danger' + className='modal-dialog-centered' + > + setModal({ ...modal, isOpen: !modal.isOpen })} + > + {modal.title} + + {modal.desc} + + {' '} + + +
diff --git a/src/modules/account/register/apis/accountApi.ts b/src/modules/account/register/apis/accountApi.ts index 8ee7892..d2014dd 100644 --- a/src/modules/account/register/apis/accountApi.ts +++ b/src/modules/account/register/apis/accountApi.ts @@ -14,7 +14,6 @@ export const accountApi = { terms: data.agreeTerms }; const res = await axios.post('api/acnt/cstmr/register', param); - return res; },