From 3f1c2f56637fd0f78c0b9c84ff278427fceeffde 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 14:20:01 +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=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=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 --- .../account/register/AccountRegisterForm.js | 230 ++++++------------ .../account/mypage/AccountMypageContainer.js | 4 +- .../account/mypage/ParentsContainer.js | 6 +- .../features/comn/crtfyhp/crtfyhpSlice.ts | 13 +- .../CrtfyhpHook.js => utility/crtfyhpUtil.js} | 23 +- 5 files changed, 103 insertions(+), 173 deletions(-) rename src/{components/account/CrtfyhpHook.js => utility/crtfyhpUtil.js} (87%) diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index 9b73d538..263acfd6 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from '@src/redux/store'; import * as yup from 'yup'; -import { Fragment, useEffect, useState } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import { isObjEmpty } from '@utils'; import { useForm } from 'react-hook-form'; @@ -22,8 +22,12 @@ import { } from '@src/redux/features/account/register/registerThunk'; import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { MODAL_CRTFYHP, MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst'; -import { CgKey } from 'react-icons/cg'; import { createRegister } from '@src/redux/features/account/register/registerThunk'; +import { + isSendCrtfyhp, + isConfirmCrtfyhp +} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; +import { CrtfyhpUtil } from '@src/utility/crtfyhpUtil'; export const AccountRegisterForm = ({ stepper, @@ -36,29 +40,11 @@ export const AccountRegisterForm = ({ // 약관동의 내용 const { agreeTerms } = useSelector(state => state.registerState); - // 분단위 카운터 - 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(() => { - if (isRunning) { - clearInterval(timer); - } - return () => { - clearInterval(timer); - }; - }, []); + const hookRef = useRef(); + const { isRunning, isCrtfyhp, counter } = useSelector( + state => state.crtfyhpState + ); // 단순 메시지 표출 모달 const handlerOpenModal = (header, body) => { @@ -70,86 +56,6 @@ export const AccountRegisterForm = ({ ); }; - // 타이머 시작 - 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 (!vData.clncd || !vData.hpno) { - handlerOpenModal( - MODAL_HEADER.crtfyhp, - '휴대폰 번호를' + MODAL_CRTFYHP.valid - ); - return; - } - - if (vData.hpno.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(sendCrtfyhp(vData.hpno)); - if (!data.result) { - if (data.code === -1) { - handlerOpenModal(MODAL_HEADER.crtfyhp, '이미 가입된 휴대폰입니다.'); - } else { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); - } - return; - } else { - handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.send); - timeStart(); - } - }; - - const timeStart = () => { - if (isRunning) { - clearInterval(timer); - } - - setIsRunning(true); - setIsCrtfy(false); - - setSendCount(sendCount + 1); - timerStart(180); - }; - // 회원가입 폼 유효성 검사 const SignupSchema = yup.object().shape({ userId: yup.string().trim().required('ID를 입력해 주세요.'), @@ -212,6 +118,7 @@ export const AccountRegisterForm = ({ }, resolver: yupResolver(SignupSchema) }); + // 취소 헨들러 const handlerCancel = async () => { movePage('/account/login'); @@ -266,10 +173,14 @@ export const AccountRegisterForm = ({ ); if (!data.result) { handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); + dispatch(isConfirmCrtfyhp(false)); + return; + } else { + handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); + dispatch(isSendCrtfyhp(false)); + dispatch(isConfirmCrtfyhp(true)); return; } - setIsRunning(true); - setIsCrtfy(true); }; let hpno = ''; @@ -424,7 +335,7 @@ export const AccountRegisterForm = ({ type='select' name='clncd' id='clncd' - readOnly={isCrtfy} + readOnly={isCrtfyhp} // value={registerInfo.clncd} onChange={onChangeHandler} ref={register} @@ -445,7 +356,7 @@ export const AccountRegisterForm = ({ -
- {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} - - 남은시간 {minutes_Counter}:{seconds_Counter} - - -
+ {!isCrtfyhp ? ( +
+ {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} + + 남은시간 {counter.min}:{counter.sec} + + +
+ ) : null} + + {isRunning ? ( - !isCrtfy ? ( -
- -
- ) : ( +
- ) +
+ ) : isCrtfyhp ? ( + ) : ( )} -
- -
+ {isRunning ? ( +
+ +
+ ) : null}