From 2f7d80decd35e6a1b48b150af7384b58308fc53e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 27 Feb 2024 16:59:30 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9D=B8=EC=A6=9D=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=EB=8B=A8=20=EC=95=84=EC=9D=B4=EB=94=94=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/account/find/AccountFindTab.js | 19 +- .../account/find/AccountFindUserId.js | 301 +++--------------- .../account/mypage/AccountMypageHpno.js | 1 - .../account/register/AccountRegisterForm.js | 1 - .../find/AccountFindUserIdContainer.js | 156 ++++++++- .../account/mypage/ParentsContainer.js | 1 - src/utility/crtfyhpUtil.js | 2 +- 7 files changed, 213 insertions(+), 268 deletions(-) diff --git a/src/components/account/find/AccountFindTab.js b/src/components/account/find/AccountFindTab.js index 396e082c..4780d841 100644 --- a/src/components/account/find/AccountFindTab.js +++ b/src/components/account/find/AccountFindTab.js @@ -14,8 +14,12 @@ import { User, Lock } from 'react-feather'; import { AccountFindUserIdContainer } from '../../../containers/account/find/AccountFindUserIdContainer'; import { AccountFindPasswordContainer } from '../../../containers/account/find/AccountFindPasswordContainer'; import { useHistory } from 'react-router-dom'; +import { useDispatch } from '@src/redux/store'; +import { openModal } from '@src/redux/features/comn/message/messageSlice'; export const AccountFindTab = props => { + const dispatch = useDispatch(); + // 탭 상태 const [activeTab, setActiveTab] = useState('2'); const history = useHistory(); @@ -32,6 +36,16 @@ export const AccountFindTab = props => { history.push(`/account/login`); }; + // 단순 메시지 표출 모달 + const handlerOpenModal = (header, body) => { + dispatch( + openModal({ + header: header, + body: body + }) + ); + }; + return ( <>
@@ -71,7 +85,10 @@ export const AccountFindTab = props => { - + diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js index 42b7eb0d..98ea5d02 100644 --- a/src/components/account/find/AccountFindUserId.js +++ b/src/components/account/find/AccountFindUserId.js @@ -1,5 +1,3 @@ -import { useDispatch, useSelector } from '@src/redux/store'; -import { useState, useEffect } from 'react'; import { InputGroup, InputGroupAddon, @@ -8,228 +6,27 @@ import { TabPane, FormGroup, Input, - Button, - Modal, - ModalHeader, - ModalBody, - ModalFooter + Button } from '@component/ui'; import { User } from 'react-feather'; - -import { confirmCrtfyhp } from '@src/redux/features/account/register/registerThunk'; -import { - findUserId, - sendCrtfyhpForId -} from '@src/redux/features/account/find/findThunk'; -import { openModal } from '@src/redux/features/comn/message/messageSlice'; -import { MODAL_CRTFYHP, MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst'; - -export const AccountFindUserId = props => { - const dispatch = useDispatch(); - - // 탭 상태 - const [activeTab, setActiveTab] = useState('2'); - - // ** Function to toggle tabs - const toggle = tab => setActiveTab(tab); - - //modal - const [confirmModal, setConfirmModal] = useState(false); - - //state값 - const { userId } = useSelector(state => state.findState); - - //param으로 넘기기 위한 값 - const [inputName, setInputName] = useState(''); - const [inputHpno, setInputHpno] = useState(''); - const [inputCrtfy, setInputCrtfy] = useState(''); - - //3분 시간 및 인증 - 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); - - // 타이머 시작 && 언마운트 종료 - useEffect(() => { - setIsRunning(true); - if (isRunning) clearInterval(timer); - return () => { - clearInterval(timer); - setIsRunning(false); - }; - }, []); - - // 단순 메시지 표출 모달 - const handlerOpenModal = (header, body) => { - dispatch( - openModal({ - header: header, - body: body - }) - ); - }; - - const handlerValidCheck = () => { - if (!inputName) { - handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); - return; - } - }; - - // 인증번호 발송 헨들러 - const handlerSend = async () => { - handlerValidCheck(); - - if (!inputHpno) { - handlerOpenModal( - MODAL_HEADER.crtfyhp, - '휴대폰 번호를' + MODAL_BODY.valid - ); - return; - } - - if (inputHpno.length < 11) { - handlerOpenModal( - MODAL_HEADER.crtfyhp, - '올바른 번호를' + MODAL_BODY.valid - ); - return; - } - - if (sendCount >= 3) { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.count); - return; - } - - const { payload: data } = await dispatch( - sendCrtfyhpForId({ - memberName: inputName, - hpno: inputHpno - }) - ); - if (data.code === -1) { - handlerOpenModal( - MODAL_HEADER.crtfyhp, - '가입되지 않은 회원정보입니다. 다시 확인해주세요.' - ); - } else if (data.code === 0) { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.send); - timeStart(); - } - }; - - // 타이머 시작 - const timeStart = () => { - if (isRunning) { - clearInterval(timer); - } - - setIsRunning(true); - setIsCrtfy(false); - - 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(''); - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.expire); - } - }, 1000); - - setTimer(timer); - - return () => { - clearInterval(timer); - }; - }; - - const handlerConfirm = async () => { - if (!inputHpno) { - handlerOpenModal( - MODAL_HEADER.crtfyhp, - '휴대폰 번호를' + MODAL_BODY.valid - ); - return; - } - - if (!inputName) { - handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); - return; - } - - if (!inputCrtfy) { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.valid); - return; - } - - const { payload: data } = await dispatch( - confirmCrtfyhp({ hpno: inputHpno, crtfyNo: inputCrtfy }) - ); - - if (!data.result) { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); - return; - } else { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); - setIsCrtfy(true); - setIsRunning(false); - } - }; - - let memberName = ''; - let hpno = ''; - let crtfyhp = ''; - const handlerChange = e => { - const { name, value } = e.target; - - if (name == 'memberName') { - const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z]{0,10}$/; - if (regex.test(value)) { - memberName = value; - setInputName(memberName); - } - } else 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 handlerFindId = () => { - dispatch(findUserId({ memberName: inputName, hpno: inputHpno })); - setConfirmModal(!confirmModal); - }; - +import { useSelector } from '@src/redux/store'; +import { CrtfyhpUtil } from '@src/utility/crtfyhpUtil'; +import { useRef } from 'react'; +import { sendCrtfyhpForId } from '@src/redux/features/account/find/findThunk'; + +export const AccountFindUserId = ({ + rq, + crtfyNo, + handlerClose, + handlerChange, + handlerFindId, + handlerConfirm, + handlerValidCheck +}) => { + const hookRef = useRef(); + const { isRunning, isCrtfyhp, counter, sendCount } = useSelector( + state => state.crtfyhpState + ); return ( <> @@ -245,8 +42,9 @@ export const AccountFindUserId = props => { id='memberName' name='memberName' placeholder='이름' - value={inputName} + value={rq?.memberName} onChange={handlerChange} + disabled={isRunning || isCrtfyhp} /> @@ -258,8 +56,8 @@ export const AccountFindUserId = props => { id='cntryCd' name='cntryCd' placeholder='+(국가번호)' + disabled={isRunning || isCrtfyhp} > - {/* */} @@ -271,12 +69,20 @@ export const AccountFindUserId = props => { id='hpno' name='hpno' placeholder='01012345678' - value={inputHpno} + value={rq?.hpno} onChange={handlerChange} + disabled={isRunning || isCrtfyhp} /> - @@ -291,12 +97,12 @@ export const AccountFindUserId = props => { id='crtfyhpNo' name='crtfyhpNo' placeholder='인증번호 입력' - value={inputCrtfy} + value={crtfyNo} onChange={handlerChange} - {...(sendCount > 0 ? {} : { disabled: true })} + {...(isRunning ? {} : { disabled: true })} /> - - 남은시간 {minutes_Counter}:{seconds_Counter} + + 남은시간 {counter.min}:{counter.sec} @@ -313,45 +119,26 @@ export const AccountFindUserId = props => {
- - - setConfirmModal(!confirmModal)} - modalClassName='modal-primary' - className='modal-dialog-centered' - > - setConfirmModal(!confirmModal)}> - 아이디 확인 - - - 회원님의 아이디는 -
- {userId} 입니다. - - - {' '} - -
+ ); }; diff --git a/src/components/account/mypage/AccountMypageHpno.js b/src/components/account/mypage/AccountMypageHpno.js index 4dea822e..33cdf3ac 100644 --- a/src/components/account/mypage/AccountMypageHpno.js +++ b/src/components/account/mypage/AccountMypageHpno.js @@ -121,7 +121,6 @@ export const AccountMypageHpno = ({ diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index 263acfd6..278be8cf 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -394,7 +394,6 @@ export const AccountRegisterForm = ({ diff --git a/src/containers/account/find/AccountFindUserIdContainer.js b/src/containers/account/find/AccountFindUserIdContainer.js index 511f5729..eb7d4ca2 100644 --- a/src/containers/account/find/AccountFindUserIdContainer.js +++ b/src/containers/account/find/AccountFindUserIdContainer.js @@ -1,13 +1,157 @@ -import { AccountFindUserId } from "../../../components/account/find/AccountFindUserId" +import { useDispatch, useSelector } from '@src/redux/store'; +import { AccountFindUserId } from '../../../components/account/find/AccountFindUserId'; +import { useEffect, useState } from 'react'; -export const AccountFindUserIdContainer = props => { +import { + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Button +} from '@component/ui'; +import { MODAL_BODY, MODAL_CRTFYHP, MODAL_HEADER } from '@src/configs/msgConst'; +import { + isConfirmCrtfyhp, + isSendCrtfyhp +} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; +import { confirmCrtfyhp } from '@src/redux/features/account/register/registerThunk'; +import { findUserId } from '@src/redux/features/account/find/findThunk'; - return( +export const AccountFindUserIdContainer = ({ + handlerClose, + handlerOpenModal +}) => { + const dispatch = useDispatch(); + const [activeTab, setActiveTab] = useState('2'); + + const [confirmModal, setConfirmModal] = useState(false); + + const { userId } = useSelector(state => state.findState); + + const [crtfyNo, setCrtfyNo] = useState(''); + const [rq, setRq] = useState({ + memberName: '', + hpno: '' + }); + + // 휴대폰 번호 제외한 유효성 검사 + const handlerValidCheck = () => { + if (!rq.memberName) { + handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); + return; + } + }; + + // 인증번호 인증 + const handlerConfirm = async () => { + if (!rq.hpno || rq.hpno === '') { + handlerOpenModal( + MODAL_HEADER.crtfyhp, + '휴대폰 번호를' + MODAL_BODY.valid + ); + return; + } + + if (!rq.memberName) { + handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); + return; + } + + if (!crtfyNo) { + handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.valid); + return; + } + + const { payload: data } = await dispatch( + confirmCrtfyhp({ hpno: rq.hpno, crtfyNo: crtfyNo }) + ); + + if (!data.result) { + handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); + return; + } else { + handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); + dispatch(isSendCrtfyhp(false)); + dispatch(isConfirmCrtfyhp(true)); + } + }; + + // onChange + let memberName = ''; + let hpno = ''; + let crtfyhp = ''; + const handlerChange = e => { + const { name, value } = e.target; + + if (name == 'memberName') { + const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z]{0,10}$/; + if (regex.test(value)) { + memberName = value; + setRq(prev => ({ + ...prev, + memberName: memberName + })); + } + } else if (name == 'hpno') { + const regex = /^[0-9]{0,11}$/; + if (regex.test(value)) { + hpno = value; + setRq(prev => ({ + ...prev, + hpno: hpno + })); + } + } else if (name == 'crtfyhpNo') { + const regex = /^[0-9]{0,6}$/; + if (regex.test(value)) { + crtfyhp = value; + setCrtfyNo(crtfyhp); + } + } + }; + + //모든 인증 완료 후 확인버튼 + const handlerFindId = () => { + dispatch(findUserId({ memberName: rq.memberName, hpno: rq.hpno })); + setConfirmModal(!confirmModal); + }; + + const toggle = tab => { + setActiveTab(tab); + }; + + return ( <> + setConfirmModal(!confirmModal)} + modalClassName='modal-primary' + className='modal-dialog-centered' + > + setConfirmModal(!confirmModal)}> + 아이디 확인 + + + 회원님의 아이디는 +
+ {userId} 입니다. + + + {' '} + + - ) -} \ No newline at end of file + ); +}; diff --git a/src/containers/account/mypage/ParentsContainer.js b/src/containers/account/mypage/ParentsContainer.js index bcc91e83..03ae7c18 100644 --- a/src/containers/account/mypage/ParentsContainer.js +++ b/src/containers/account/mypage/ParentsContainer.js @@ -56,7 +56,6 @@ export const ParentsContainer = () => { diff --git a/src/utility/crtfyhpUtil.js b/src/utility/crtfyhpUtil.js index 912f33ed..c0629f53 100644 --- a/src/utility/crtfyhpUtil.js +++ b/src/utility/crtfyhpUtil.js @@ -10,7 +10,7 @@ import { } from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; export const CrtfyhpUtil = forwardRef( - ({ handlerValidCheck, sendCrtfyhp, rq, modalMessage, type }, ref) => { + ({ handlerValidCheck, sendCrtfyhp, modalMessage, type }, ref) => { const dispatch = useDispatch(); const { isRunning, sendCount, isCrtfyhp } = useSelector( state => state.crtfyhpState