인증번호 발송 공통hook 생성

src/components/account/CrtfyhpHook.js

@@ -0,0 +1,149 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { MODAL_CRTFYHP, MODAL_HEADER, MODAL_BODY } from '@src/configs/msgConst';
+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) => {
+    const dispatch = useDispatch();
+    const { isRunning, sendCount } = useSelector(state => state.crtfyhpState);
+
+    // 타이머
+    const [timer, setTimer] = useState(null);
+
+    // 언마운트시 타이머 종료
+    useEffect(() => {
+      if (isRunning) {
+        handlerResetTimer();
+      }
+
+      return () => {
+        handlerResetTimer();
+      };
+    }, []);
+
+    // 타이머 및 인증번호 관련 값 초기화
+    const handlerResetTimer = () => {
+      clearInterval(timer);
+      dispatch(resetTimer());
+    };
+
+    // 단순 메시지 표출 모달
+    const handlerOpenModal = (header, body) => {
+      dispatch(
+        openModal({
+          header: header,
+          body: body
+        })
+      );
+    };
+
+    // 타이머 셋팅
+    const handlerTimer = count => {
+      let minutes, seconds;
+
+      // 타이머 동작
+      const timer = setInterval(() => {
+        dispatch(isStartTimer(true));
+        minutes = parseInt(count / 60, 10);
+        seconds = parseInt(count % 60, 10);
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        seconds = seconds < 10 ? '0' + seconds : seconds;
+        dispatch(
+          setCounter({
+            min: minutes,
+            sec: seconds
+          })
+        );
+
+        // 타이머 종료
+        if (--count < 0) {
+          clearInterval(timer);
+          dispatch(isStartTimer(false));
+          handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.expire);
+        }
+      }, 1000);
+
+      setTimer(timer);
+
+      return () => {
+        handlerResetTimer();
+      };
+    };
+
+    // 타이머 시작
+    const handlerStart = () => {
+      if (isRunning) {
+        clearInterval(timer);
+      }
+
+      dispatch(isStartTimer(true));
+      dispatch(isSendCrtfyhp(false));
+      dispatch(setSendCount());
+      handlerTimer(180);
+    };
+
+    // 인증번호 전송
+    const handlerSendCrtfyhp = async rq => {
+      if (handlerValidCheck) handlerValidCheck();
+
+      // 휴대폰 번호 유효성검사
+      if (!rq.hpno || rq.hpno === '') {
+        handlerOpenModal(
+          MODAL_HEADER.crtfyhp,
+          '휴대폰 번호를' + MODAL_BODY.valid
+        );
+        return;
+      }
+
+      // 휴대폰 번호 길이 유효성검사
+      if (rq.hpno.length < 11) {
+        handlerOpenModal(
+          MODAL_HEADER.crtfyhp,
+          '올바른 번호를' + MODAL_BODY.valid
+        );
+        return;
+      }
+
+      // 인증번호 전송 횟수 제한
+      if (sendCount >= 3) {
+        handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.count);
+        return;
+      }
+
+      let request;
+      if (type) {
+        request = rq.hpno;
+      } else {
+        request = rq;
+      }
+
+      // 인증번호 전송
+      const { payload: data } = await dispatch(sendCrtfyhp(request));
+      if (!data.result) {
+        if (data.code === -1) {
+          handlerOpenModal(MODAL_HEADER.crtfyhp, modalMesssage);
+        } else {
+          handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed);
+        }
+        return;
+      } else {
+        handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.send);
+        handlerStart();
+      }
+    };
+
+    useImperativeHandle(ref, () => ({
+      handlerSendCrtfyhp
+    }));
+
+    return null;
+  }
+);

src/components/account/find/AccountFindPassword.js

@@ -71,11 +71,15 @@ export const AccountFindPassword = props => {
     );
   };
 
-  const handlerSend = async () => {
+  const handlerValidCheck = () => {
     if (!inputId) {
       handlerOpenModal(MODAL_HEADER.crtfyhp, '아이디를' + MODAL_BODY.valid);
       return;
     }
+  };
+
+  const handlerSend = async () => {
+    handlerValidCheck();
 
     if (!inputHpno) {
       handlerOpenModal(

src/components/account/find/AccountFindUserId.js

@@ -72,12 +72,16 @@ export const AccountFindUserId = props => {
     );
   };
 
-  // 인증번호 발송 헨들러
-  const handlerSend = async () => {
+  const handlerValidCheck = () => {
     if (!inputName) {
       handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid);
       return;
     }
+  };
+
+  // 인증번호 발송 헨들러
+  const handlerSend = async () => {
+    handlerValidCheck();
 
     if (!inputHpno) {
       handlerOpenModal(

src/components/account/register/AccountRegisterForm.js

@@ -53,8 +53,6 @@ export const AccountRegisterForm = ({
   useEffect(() => {
     if (isRunning) {
       clearInterval(timer);
-    } else {
-      // handlerSmsSend();
     }
 
     return () => {
@@ -129,27 +127,27 @@ export const AccountRegisterForm = ({
     const { payload: data } = await dispatch(sendCrtfyhp(vData.hpno));
     if (!data.result) {
       if (data.code === -1) {
-        handlerOpenModal(
-          MODAL_HEADER.crtfyhp,
-          '이미 가입된 휴대폰입니다. 비밀번호 찾기를 이용해주세요.'
-        );
+        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);
-
-    // handlerSmsSend();
   };
 
   // 회원가입 폼 유효성 검사

src/containers/account/mypage/AccountMypageContainer.js

@@ -19,6 +19,7 @@ import {
 } from '@src/redux/features/account/auth/authThunk';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import { MODAL_CRTFYHP, MODAL_HEADER, MODAL_BODY } from '@src/configs/msgConst';
+import { ParentsContainer } from './ParentsContainer';
 
 // ** Function to toggle tabs
 const AccountMypageContainer = () => {
@@ -72,13 +73,11 @@ const AccountMypageContainer = () => {
 
   // 타이머 언마운트시 종료
   useEffect(() => {
-    // setIsRunning(true);
     if (isRunning) {
       clearInterval(timer);
     }
     return () => {
       clearInterval(timer);
-      // setIsRunning(false);
     };
   }, []);
 
@@ -140,7 +139,6 @@ const AccountMypageContainer = () => {
       clearInterval(timer);
     };
   };
-  //
 
   //휴대폰 인증번호 보내기
   const handlerSmsSend = async () => {
@@ -153,10 +151,7 @@ const AccountMypageContainer = () => {
       );
       return;
     }
-    if (sendCount >= 3) {
-      handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.count);
-      return;
-    }
+
     if (inputHpno.length < 11) {
       handlerOpenModal(
         MODAL_HEADER.crtfyhp,
@@ -165,7 +160,11 @@ const AccountMypageContainer = () => {
       return;
     }
 
-    // const res = await accountAPI.sendCrtfyhp(inputHpno);
+    if (sendCount >= 3) {
+      handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.count);
+      return;
+    }
+
     const { payload: data } = await dispatch(sendCrtfyhp(inputHpno));
     if (!data.result) {
       if (data.code === -1) {
@@ -176,16 +175,20 @@ const AccountMypageContainer = () => {
       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);
-
-    // handlerSmsSend();
   };
 
   //휴대폰 인증하기
@@ -332,6 +335,9 @@ const AccountMypageContainer = () => {
             handlerConfirm={handlerLeave}
             color='danger'
           />
+          <div style={{ background: '#ff00ff' }}>
+            <ParentsContainer />
+          </div>
         </>
       ) : (
         <></>

src/containers/account/mypage/ParentsContainer.js

@@ -0,0 +1,65 @@
+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';
+
+export const ParentsContainer = () => {
+  const hookRef = useRef();
+  const { isRunning, isCrtfyhp, counter } = useSelector(
+    state => state.crtfyhpState
+  );
+
+  const [hpno, setHpno] = useState('');
+
+  const handlerChange = e => {
+    const { name, value } = e.target;
+
+    if (name == 'hpno') {
+      const regex = /^[0-9]{0,11}$/;
+      if (regex.test(value)) {
+        setHpno(value);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Row className='input-inline-btn'>
+        <Col md='8'>
+          <Label className='form-label' for='hpno'>
+            휴대폰 번호
+          </Label>
+          <Input
+            type='number'
+            name='hpno'
+            id='hpno'
+            bsSize='sm'
+            value={hpno}
+            onChange={handlerChange}
+            placeholder='01012345678'
+          />
+        </Col>
+        <Col md='4' xs='12'>
+          <span className={!isRunning || isCrtfyhp ? 'time d-none' : 'time'}>
+            남은시간 {counter.min}:{counter.sec}
+          </span>
+          <Button
+            type='button'
+            color='secondary'
+            onClick={() => hookRef?.current?.handlerSendCrtfyhp({ hpno })}
+          >
+            <span className='d-sm-inline-block'>인증번호 발송</span>
+          </Button>
+        </Col>
+      </Row>
+      <CrtfyhpHook
+        ref={hookRef}
+        sendCrtfyhp={sendCrtfyhp}
+        rq={{ hpno }}
+        modalMesssage='이미 가입된 어쩌구 입니다.'
+        type='1'
+      />
+    </>
+  );
+};