인증번호 공통단 회원가입에 적용

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 = ({
                 <Input
                   name='hpno'
                   id='hpno'
-                  readOnly={isCrtfy}
+                  readOnly={isCrtfyhp}
                   // value={registerInfo.hpno}
                   onChange={onChangeHandler}
                   placeholder='01000000000'
@@ -460,59 +371,79 @@ export const AccountRegisterForm = ({
                 )}
               </Col>
             </div>
-            <div className='user-phone-btn'>
-              {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
-              <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
-                남은시간 {minutes_Counter}:{seconds_Counter}
-              </span>
-              <Button type='button' color='secondary' onClick={handlerSmsSend}>
-                <span className='d-sm-inline-block'>인증번호 발송</span>
-              </Button>
-            </div>
+            {!isCrtfyhp ? (
+              <div className='user-phone-btn'>
+                {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
+                <span className={isRunning ? 'time' : 'time d-none'}>
+                  남은시간 {counter.min}:{counter.sec}
+                </span>
+                <Button
+                  type='button'
+                  color='secondary'
+                  onClick={() => {
+                    hookRef?.current?.handlerSendCrtfyhp({
+                      hpno: getValues().hpno
+                    });
+                  }}
+                >
+                  <span className='d-sm-inline-block'>인증번호 발송</span>
+                </Button>
+              </div>
+            ) : null}
           </FormGroup>
+          <CrtfyhpUtil
+            ref={hookRef}
+            sendCrtfyhp={sendCrtfyhp}
+            rq={{ hpno: getValues().hpno }}
+            modalMessage='이미 가입된 휴대폰입니다.'
+            type='1'
+          />
           <FormGroup tag={Col} md='6'>
             <Label className='form-label' for='crtfyNo'>
               <span className='necessary'>*</span>인증번호
             </Label>
+
             {isRunning ? (
-              !isCrtfy ? (
-                <div className='input-btn d-flex justify-content-between'>
-                  <Input
-                    type='number'
-                    name='crtfyNo'
-                    id='crtfyNo'
-                    // value={registerInfo.crtfyNo}
-                    onChange={onChangeHandler}
-                    placeholder=''
-                    ref={register}
-                    // ref={register({ required: true })}
-                    className={classnames({
-                      'is-invalid': errors.crtfyNo
-                    })}
-                  />
-                </div>
-              ) : (
+              <div className='input-btn d-flex justify-content-between'>
                 <Input
-                  className='font-sm'
-                  defaultValue='휴대폰 인증을 완료하였습니다.'
+                  disabled={!isRunning}
+                  type='number'
+                  name='crtfyNo'
+                  id='crtfyNo'
+                  // value={registerInfo.crtfyNo}
+                  onChange={onChangeHandler}
+                  placeholder=''
+                  ref={register}
+                  // ref={register({ required: true })}
+                  className={classnames({
+                    'is-invalid': errors.crtfyNo
+                  })}
                 />
-              )
+              </div>
+            ) : isCrtfyhp ? (
+              <Input
+                className='font-sm'
+                placeholder='휴대폰 인증을 완료하였습니다.'
+                disabled
+              />
             ) : (
               <Input
                 className='font-sm'
-                // defaultValue='인증번호 발송을 진행해 주세요.'
                 placeholder='인증번호 발송을 진행해 주세요.'
+                disabled
               />
             )}
-            <div className='user-phone-btn'>
-              <Button
-                type='button'
-                color='secondary'
-                onClick={handlerSmsConfirm}
-              >
-                <span className='d-sm-inline-block'>인증하기</span>
-              </Button>
-            </div>
+            {isRunning ? (
+              <div className='user-phone-btn'>
+                <Button
+                  type='button'
+                  color='secondary'
+                  onClick={handlerSmsConfirm}
+                >
+                  <span className='d-sm-inline-block'>인증하기</span>
+                </Button>
+              </div>
+            ) : null}
           </FormGroup>
           <FormGroup tag={Col} md='6'>
             <Label className='form-label' for={'userId'}>
@@ -531,10 +462,6 @@ export const AccountRegisterForm = ({
                   'is-invalid': errors.userId
                 })}
               />
-              {/* <Button.Ripple type='button' color='secondary'>
-                <span className='d-sm-inline-block'>ID 중복확인</span>
-              </Button.Ripple> */}
-
               {errors && errors.userId && (
                 <FormFeedback>{errors.userId.message}</FormFeedback>
               )}
@@ -544,7 +471,6 @@ export const AccountRegisterForm = ({
             <Label className='form-label' for='email'>
               Email
             </Label>
-            {/* <div className='input-btn d-flex justify-content-between'> */}
             <div className=''>
               <Input
                 type='email'

src/containers/account/mypage/AccountMypageContainer.js

@@ -335,9 +335,9 @@ const AccountMypageContainer = () => {
             handlerConfirm={handlerLeave}
             color='danger'
           />
-          <div style={{ background: '#ff00ff' }}>
+          {/* <div style={{ background: '#ff00ff' }}>
             <ParentsContainer />
-          </div>
+          </div> */}
         </>
       ) : (
         <></>

src/containers/account/mypage/ParentsContainer.js

@@ -1,8 +1,8 @@
-import { CrtfyhpHook } from '@src/components/account/CrtfyhpHook';
 import { sendCrtfyhp } from '@src/redux/features/account/register/registerThunk';
 import { useSelector } from '@src/redux/store';
 import { Button, Label, Row, Col, Input } from '@src/components/ui';
 import { useRef, useState } from 'react';
+import { CrtfyhpUtil } from '@src/utility/crtfyhpUtil';
 
 export const ParentsContainer = () => {
   const hookRef = useRef();
@@ -53,11 +53,11 @@ export const ParentsContainer = () => {
           </Button>
         </Col>
       </Row>
-      <CrtfyhpHook
+      <CrtfyhpUtil
         ref={hookRef}
         sendCrtfyhp={sendCrtfyhp}
         rq={{ hpno }}
-        modalMesssage='이미 가입된 어쩌구 입니다.'
+        modalMessage='이미 가입된 어쩌구 입니다.'
         type='1'
       />
     </>

src/redux/features/comn/crtfyhp/crtfyhpSlice.ts

@@ -1,9 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initCrtfyhp = {
-  isRunning: false,
-  isCrtfyhp: false,
-  sendCount: 0,
+  isRunning: false, // 타이머 시작 여부
+  isCrtfyhp: false, // 인증완료 여부
+  sendCount: 0, // 인증번호 전송횟수
   counter: {
     min: '03',
     sec: '00'
@@ -14,10 +14,10 @@ const crtfyhpSlice = createSlice({
   name: 'crtfyhpSlice',
   initialState: initCrtfyhp,
   reducers: {
-    isStartTimer: (state, action) => {
+    isSendCrtfyhp: (state, action) => {
       state.isRunning = action.payload as boolean;
     },
-    isSendCrtfyhp: (state, action) => {
+    isConfirmCrtfyhp: (state, action) => {
       state.isCrtfyhp = action.payload as boolean;
     },
     setSendCount: (state, action) => {
@@ -31,15 +31,14 @@ const crtfyhpSlice = createSlice({
     },
     resetTimer: (state, action) => {
       state.isRunning = false;
-      state.isCrtfyhp = false;
       state.counter = { min: '03', sec: '00' };
     }
   }
 });
 
 export const {
-  isStartTimer,
   isSendCrtfyhp,
+  isConfirmCrtfyhp,
   setSendCount,
   setCounter,
   resetTimer

src/utility/crtfyhpUtil.js

@@ -4,16 +4,17 @@ import { useDispatch, useSelector } from '@src/redux/store';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import {
   isSendCrtfyhp,
-  isStartTimer,
   resetTimer,
   setCounter,
   setSendCount
 } from '@src/redux/features/comn/crtfyhp/crtfyhpSlice';
 
-export const CrtfyhpHook = forwardRef(
-  ({ handlerValidCheck, sendCrtfyhp, rq, modalMesssage, type }, ref) => {
+export const CrtfyhpUtil = forwardRef(
+  ({ handlerValidCheck, sendCrtfyhp, rq, modalMessage, type }, ref) => {
     const dispatch = useDispatch();
-    const { isRunning, sendCount } = useSelector(state => state.crtfyhpState);
+    const { isRunning, sendCount, isCrtfyhp } = useSelector(
+      state => state.crtfyhpState
+    );
 
     // 타이머
     const [timer, setTimer] = useState(null);
@@ -29,6 +30,12 @@ export const CrtfyhpHook = forwardRef(
       };
     }, []);
 
+    useEffect(() => {
+      if (isCrtfyhp) {
+        clearInterval(timer);
+      }
+    }, [isCrtfyhp]);
+
     // 타이머 및 인증번호 관련 값 초기화
     const handlerResetTimer = () => {
       clearInterval(timer);
@@ -51,7 +58,6 @@ export const CrtfyhpHook = forwardRef(
 
       // 타이머 동작
       const timer = setInterval(() => {
-        dispatch(isStartTimer(true));
         minutes = parseInt(count / 60, 10);
         seconds = parseInt(count % 60, 10);
         minutes = minutes < 10 ? '0' + minutes : minutes;
@@ -66,7 +72,7 @@ export const CrtfyhpHook = forwardRef(
         // 타이머 종료
         if (--count < 0) {
           clearInterval(timer);
-          dispatch(isStartTimer(false));
+          dispatch(isSendCrtfyhp(false));
           handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.expire);
         }
       }, 1000);
@@ -84,8 +90,7 @@ export const CrtfyhpHook = forwardRef(
         clearInterval(timer);
       }
 
-      dispatch(isStartTimer(true));
-      dispatch(isSendCrtfyhp(false));
+      dispatch(isSendCrtfyhp(true));
       dispatch(setSendCount());
       handlerTimer(180);
     };
@@ -129,7 +134,7 @@ export const CrtfyhpHook = forwardRef(
       const { payload: data } = await dispatch(sendCrtfyhp(request));
       if (!data.result) {
         if (data.code === -1) {
-          handlerOpenModal(MODAL_HEADER.crtfyhp, modalMesssage);
+          handlerOpenModal(MODAL_HEADER.crtfyhp, modalMessage);
         } else {
           handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed);
         }