From 6a73c15d5e5c735a811b1c9ae83d1e157161aba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?sanguu=28=EB=B0=95=EC=83=81=ED=98=84=29?= Date: Wed, 19 Oct 2022 16:32:47 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD(=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=9E=91=EC=97=85)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/mypage/AccountMypagePwForm.js | 115 +++++++++++------- .../account/mypage/AccountMypageContainer.js | 4 +- src/modules/account/login/models/authModel.ts | 2 - src/modules/account/login/sagas/authSaga.ts | 2 +- 4 files changed, 72 insertions(+), 51 deletions(-) diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index 2df6428..fad3cab 100644 --- a/src/components/account/mypage/AccountMypagePwForm.js +++ b/src/components/account/mypage/AccountMypagePwForm.js @@ -1,6 +1,5 @@ // ** React Imports import { useState, useEffect } from 'react' -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, @@ -8,40 +7,43 @@ import { } from 'reactstrap' // ** Styles import '../../../assets/css/custom.css'; -import classnames from 'classnames'; import { pwUpdateAction, pwCheckAction } from '../../../modules/account/login/actions/authAction'; import { useHistory } from 'react-router-dom'; +import { ErrorModal } from '../../modal/ErrorModal'; -// const SignupSchema = yup.object().shape({ -// userPswd: yup -// .string() -// .required('비밀번호를 입력해 주세요.'), -// newPswd: yup -// .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], '비밀번호가 일치하지 않습니다.') -// }); - -const AccountMypagePwForm = (props) => { - // const { UserPwCheck } = useSelector(state => state.authState) + +const AccountMypagePwForm = ({ activeTab }) => { + const { result } = useSelector(state => state.UserPageState) const [userPswd, setuserPswd] = useState(''); - // console.log("UserPwCheck>>", UserPwCheck); - // const { register, errors, handleSubmit } = useForm({ - // defaultValues: { - // cstmrSno: user.cstmrSno, - // userPswd: '', - // newPswd: '', - // newPswdConfirm: '' - // }, - // resolver: yupResolver(SignupSchema) - - // }); + const [inputs, setInputs] = useState({ + newPswd: '', + newPswdConfirm: '' + }); + const { newPswd, newPswdConfirm } = inputs; + + const [resultOk, setresultOk] = useState(true); + const [btnOk, setbtnOk] = useState(false); + const [modal, setModal] = useState({ + isOpen: false, + title: '', + desc: '' + }); + + useEffect(() => { + if (result) { + if (result.errorCode) { + setresultOk(true) + } else + setresultOk(false) + setbtnOk(true) + } + }, [result]) + + useEffect(() => { + setresultOk(true) + }, [activeTab]) + + const dispatch = useDispatch(); const history = useHistory(); @@ -50,61 +52,84 @@ const AccountMypagePwForm = (props) => { setuserPswd(e.target.value); //console.log(setuserPswd); }; + const onChanges = (e) => { + const { value, name } = e.target; + setInputs({ + ...inputs, + [name]: value + }); + }; function handleUseHitory() { history.push('/'); } - function pwSubmit() { - dispatch(pwUpdateAction.request(data)); + const reg_pw = + /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/; + if (!reg_pw.test(inputs.newPswd && inputs.newPswdConfirm)) { + setModal({ + isOpen: true, + title: '필수값 입력 오류', + desc: '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.', + }); + } + else if (inputs.newPswd != inputs.newPswdConfirm) { + setModal({ + isOpen: true, + title: '필수값 입력 오류', + desc: '비밀번호가 일치하지 않습니다.', + }); + } + else { + dispatch(pwUpdateAction.request(inputs)); + } } function pwok() { - // dispatch(pwUpdateAction.request(data)); dispatch(pwCheckAction.request(userPswd)); } return ( -
- - +
확인
- + + - - + + - + - - +
- 저장 + 저장 취소
- + + ) } + export default AccountMypagePwForm; diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index 630573a..52a0f8d 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -48,7 +48,6 @@ const AccountMypageContainer = () => { // { id } = useParams(); const toggle = tab => { - console.log(tab); return setActiveTab(tab); }; const [formModal, setFormModal] = useState(false); @@ -82,7 +81,6 @@ const AccountMypageContainer = () => { desc: '', color: '' }); - const timerStart = count => { let minutes, seconds; @@ -384,7 +382,7 @@ const AccountMypageContainer = () => { ) : ( <> )} - {activeTab == 2 ? : <>} + {activeTab == 2 ? : <>}