diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js index e270d3b..813f3e0 100644 --- a/src/components/account/mypage/AccountMypageForm.js +++ b/src/components/account/mypage/AccountMypageForm.js @@ -2,8 +2,8 @@ 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 + Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, + Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' // ** Styles @@ -12,282 +12,282 @@ import { accountApi } from '../../../modules/account/register/apis/accountApi'; //import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel'; //const [detailData, setDetailData] = useState(userPage.UserPageData); -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, 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 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); + setValue('crtfyNo', ''); + // setCrtfyNo(''); + } + }, 1000); + + 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); - 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); - setValue('crtfyNo', ''); - // setCrtfyNo(''); - } - }, 1000); - - 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); - }; - }, []); + // handlerSmsSend(); + }; + useEffect(() => { + // console.log('isRunning>>>', isRunning); + if (isRunning) { + clearInterval(timer); + } else { + // handlerSmsSend(); + } - //휴대폰 인증하기 - 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 ( - - - - - -
- {userInfo ? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - 변경 - -
- -
- - - 휴대폰번호 변경 - - - - - - - - - - - - - {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} - - 남은시간 {minutes_Counter}:{seconds_Counter} - - - 인증번호 발송 - - - - - - - - - - - - - - - 인증하기 - - - - - - - - - - - -
-
- + 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 ( + + + + + +
+ {userInfo ? + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + handlerInput(e)} /> + + + + + +
+ + 변경 + +
+ +
+ + + 휴대폰번호 변경 + + + + + + + + + + + + + {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} + + 남은시간 {minutes_Counter}:{seconds_Counter} + + + 인증번호 발송 + + + + + + + + + + + + + + + 인증하기 + + - : <> - } -
-
- 저장 - 취소 -
- +
+ +
+ + + + + +
+ + +
+ : <> + } +
+
+ 저장 + 취소 +
+
-
-
- -
+ + + +
setModal({ ...modal, isOpen: !modal.isOpen })} @@ -310,7 +310,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate,handlerI
- - ) + + ) } export default AccountMypageForm; diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index fe322ec..a5a65f2 100644 --- a/src/components/account/mypage/AccountMypagePwForm.js +++ b/src/components/account/mypage/AccountMypagePwForm.js @@ -5,7 +5,7 @@ import * as yup from 'yup'; import { useForm } from 'react-hook-form'; import { useSelector, useDispatch } from 'react-redux' import { - Card, CardBody, Row, Col, Nav, NavItem, NavLink,TabContent, TabPane, Alert, FormGroup,FormFeedback, Form, Input, Label, Button, + Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, FormFeedback, Form, Input, Label, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' // ** Styles @@ -13,79 +13,79 @@ import '../../../assets/css/custom.css'; import classnames from 'classnames'; import { pwUpdateAction } from '../../../modules/account/login/actions/authAction'; - const SignupSchema = yup.object().shape({ +const SignupSchema = yup.object().shape({ userPswd: yup - .string() - .required('비밀번호를 입력주세요.'), + .string() + .required('비밀번호를 입력주세요.'), newPswd: yup - .string() - .required('비밀번호를 입력주세요.') - .matches( - /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/, - '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'), + .string() + .required('비밀번호를 입력주세요.') + .matches( + /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/, + '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'), newPswdConfirm: yup - .string() - .required('비밀번호 확인을 입력해 주세요.') - .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.') + .string() + .required('비밀번호 확인을 입력해 주세요.') + .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.') }); -const AccountMypagePwForm = ({user}) => { - +const AccountMypagePwForm = ({ user }) => { - const { register,errors,handleSubmit } = useForm({ - defaultValues: { - cstmrSno:user.cstmrSno, - userPswd: '', - newPswd: '', - newPswdConfirm: '' - }, - resolver: yupResolver(SignupSchema) - }); - const dispatch = useDispatch(); - const onSubmit = data => { - dispatch(pwUpdateAction.request(data)); -} + + const { register, errors, handleSubmit } = useForm({ + defaultValues: { + cstmrSno: user.cstmrSno, + userPswd: '', + newPswd: '', + newPswdConfirm: '' + }, + resolver: yupResolver(SignupSchema) + }); + const dispatch = useDispatch(); + const onSubmit = data => { + dispatch(pwUpdateAction.request(data)); + } return (
- -
- - - + +
+ + + - + {errors && errors.userPswd && ( - {errors.userPswd.message} - )} - - - - + {errors.userPswd.message} + )} + + + + - + {errors && errors.newPswd && ( - {errors.newPswd.message} + {errors.newPswd.message} )} - - - - + + + + - + {errors && errors.newPswdConfirm && ( - {errors.newPswdConfirm.message} + {errors.newPswdConfirm.message} )} - - - -
-
- 저장 - 취소 -
-
+
+ +
+
+
+ 저장 + 취소 +
+
- + ) } export default AccountMypagePwForm; diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index 6148430..5ed99dc 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -35,40 +35,40 @@ const AccountMypageContainer = () => { const [userInfo, setUserInfo] = useState(); useEffect(() => { - if(userPage) - setUserInfo(userPage) - + if (userPage) + setUserInfo(userPage[0]) }, [userPage]) - + const handlerInput = e => { + const { name, value } = e.target; - setParams({ - ...params, - [name]: value + setUserInfo({ + ...userInfo, + [name]: value }); - }; + }; useEffect(() => { if (user) { dispatch(userPageAction.request(user.cstmrSno)); } }, []); - + const handler = () => { - setFormModal(!formModal) + setFormModal(!formModal) } //업데이트 const handlerUpdate = () => { const param = { cstmrSno: user.cstmrSno, - email: userPage[0].email, - updateUserId : userPage[0].userId, + email: userInfo.email, + updateUserId: userInfo.userId, } - + dispatch(userupdateAction.request(param)); - }; - + }; + return (
@@ -93,14 +93,14 @@ const AccountMypageContainer = () => { handler={handler} formModal={formModal} handlerUpdate={handlerUpdate} + handlerInput={handlerInput} /> : <> } {activeTab == 2 ? - : <>