마이페이지(최종본)

src/components/account/mypage/AccountMypageForm.js

@@ -8,148 +8,20 @@ import {
 
 // ** Styles
 import '../../../assets/css/custom.css';
-import { accountApi } from '../../../modules/account/register/apis/accountApi';
 //import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
 //const [detailData, setDetailData] = useState(userPage.UserPageData);
+import { useHistory } from 'react-router-dom';
 
-const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handlerInput }) => {
-  const [isRunning, setIsRunning] = useState(false);
-  const [sendCount, setSendCount] = useState(0);
-  const [isCrtfy, setIsCrtfy] = useState(false);
-  const [minutes_Counter, setMinutes_Counter] = useState('03');
-  const [seconds_Counter, setSeconds_Counter] = useState('00');
-  const [timer, setTimer] = useState(null);
-  const [modal, setModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
+const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,handler,minutes_Counter, isRunning ,formModal, handlerUpdate,modal,handlerSmsConfirm,handlerChange,handlerInput,inputHpno,inputCrtfy,okinput}) => {
 
-  const timerStart = count => {
-    let minutes, seconds;
+  const history = useHistory();
 
-    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);
+  function handleUseHitory() {
+    history.push('/');
+  }
 
-    setTimer(timer);
-
-    return () => {
-      clearInterval(timer);
-    };
-  };
-  //휴대폰 인증번호 보내기
-  const handlerSmsSend = async () => {
-    // const vData = getValues();
-
-    if (!userInfo.clncd || !userInfo.hpno) {
-      setModal({
-        isOpen: true,
-        title: '인증번호 발송',
-        desc: '휴대폰 번호를 입력 해주세요.'
-      });
-      return;
-    }
-
-    if (sendCount >= 3) {
-      setModal({
-        isOpen: true,
-        title: '인증번호 발송',
-        desc: '인증번호 발송은 3회 까지만 가능합니다.'
-      });
-      return;
-    }
-
-    const res = await accountApi.crtfyhp(userInfo.hpno);
-
-    if (!res.data.result) {
-      if (res.data.code === -1) {
-        setModal({
-          isOpen: true,
-          title: '인증번호 발송',
-          desc: '이미 가입된 휴대폰 입니다.'
-        });
-      } else {
-        setModal({
-          isOpen: true,
-          title: '인증번호 발송',
-          desc: '인증번호 발송을 실패하였습니다.'
-        });
-      }
-      return;
-    }
-    // console.log(res);
-    if (isRunning) {
-      clearInterval(timer);
-    }
-    setIsRunning(true);
-    setSendCount(sendCount + 1);
-    timerStart(180);
-
-    // handlerSmsSend();
-  };
-  useEffect(() => {
-    // console.log('isRunning>>>', isRunning);
-    if (isRunning) {
-      clearInterval(timer);
-    } else {
-      // handlerSmsSend();
-    }
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  //휴대폰 인증하기
-  const handlerSmsConfirm = async () => {
-    //const vData = getValues();
-
-    if (!userInfo.clncd || !userInfo.hpno) {
-      setModal({
-        isOpen: true,
-        title: '인증번호 인증',
-        desc: '휴대폰 번호를 입력 해주세요.'
-      });
-
-      return false;
-    }
-    if (!userInfo.crtfyNo) {
-      setModal({
-        isOpen: true,
-        title: '인증번호 인증',
-        desc: '인증번호 를 입력 해주세요.'
-      });
-      return false;
-    }
-
-    const res = await accountApi.crtfyhpConfirm(vData.hpno, vData.crtfyNo);
-
-    if (!res.data.result) {
-      setModal({
-        isOpen: true,
-        title: '인증번호 인증',
-        desc: '인증번호 가 잘못 되었습니다.'
-      });
-      return;
-    }
-    setIsRunning(true);
-    setIsCrtfy(true);
-  };
   return (
     <Row className='app-user-edit'>
       <Col sm='12'>
@@ -210,7 +82,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
                             <span className='d-sm-inline-block'>변경</span>
                           </Button.Ripple>
                         </div>
-                        <Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo.hpno || ""} />
+                        <Input type='number' name='clncd' id='hpno' size='sm' placeholder='' disabled value={!okinput ? userInfo.hpno || "" : inputHpno } />
                         <div>
                           <Modal
                             isOpen={formModal}
@@ -231,7 +103,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
                                     <Row className='input-inline-btn'>
                                       <Col md='8'>
                                         <Label className='form-label' for='hpno'>휴대폰 번호</Label>
-                                        <Input type='number' disabled name='test' id='hpno' size='sm' />
+                                        <Input type='number' name='hpno' id='hpno' size='sm' value={inputHpno} onChange={handlerChange} placeholder='01000000000' />
                                       </Col>
                                       <Col md='4' xs='12'>
                                         {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
@@ -250,7 +122,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
                                     <Row className='input-inline-btn'>
                                       <Col md='8'>
                                         <Label className='form-label' for='crtfyNo'>인증번호</Label>
-                                        <Input type='number' name='test' id='verifCode' size='sm' />
+                                        <Input type='number' name='crtfyhpNo' id='crtfyhpNo' size='sm' value={inputCrtfy} onChange={handlerChange}  />
                                       </Col>
                                       <Col md='4' xs='12'>
                                         <Button.Ripple type='button' color='secondary' onClick={handlerSmsConfirm}>
@@ -280,36 +152,13 @@ const AccountMypageForm = ({ userInfo, handler, formModal, handlerUpdate, handle
               </div>
               <div className='d-flex align-items-center'>
                 <Button.Ripple className='mr-1' color='primary' size='sm' onClick={handlerUpdate}>저장</Button.Ripple>
-                <Button.Ripple color='danger' size='sm'>취소</Button.Ripple>
+                <Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple>
               </div>
             </TabPane>
 
           </CardBody>
         </Card>
       </Col>
-      <div className='vertically-centered-modal'>
-        <Modal
-          isOpen={modal.isOpen}
-          toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-          modalClassName='modal-danger'
-          className='modal-dialog-centered'
-        >
-          <ModalHeader
-            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-          >
-            {modal.title}
-          </ModalHeader>
-          <ModalBody>{modal.desc}</ModalBody>
-          <ModalFooter>
-            <Button
-              color='danger'
-              onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-            >
-              확인
-            </Button>{' '}
-          </ModalFooter>
-        </Modal>
-      </div>
     </Row>
   )
 }

src/components/account/mypage/AccountMypagePwForm.js

@@ -12,6 +12,7 @@ import {
 import '../../../assets/css/custom.css';
 import classnames from 'classnames';
 import { pwUpdateAction } from '../../../modules/account/login/actions/authAction';
+import { useHistory } from 'react-router-dom';
 
 const SignupSchema = yup.object().shape({
     userPswd: yup
@@ -45,6 +46,12 @@ const AccountMypagePwForm = ({ user }) => {
     const onSubmit = data => {
         dispatch(pwUpdateAction.request(data));
     }
+    const history = useHistory();
+
+  
+    function handleUseHitory(){
+      history.push('/');
+    }
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <TabPane tabId='2'>
@@ -81,7 +88,7 @@ const AccountMypagePwForm = ({ user }) => {
                 </div>
                 <div className='d-flex align-items-center'>
                     <Button.Ripple className='mr-1' color='primary' type="submit" size='sm'>저장</Button.Ripple>
-                    <Button.Ripple color='danger' size='sm'>취소</Button.Ripple>
+                    <Button.Ripple color='danger' size='sm'onClick={handleUseHitory}>취소</Button.Ripple>
                 </div>
             </TabPane>
         </form>

src/components/account/register/AccountRegisterForm.js

@@ -167,7 +167,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       .oneOf([yup.ref('userPswd'), null], '비밀번호가 일치하지 않습니다.')
   });
 
-  const { register, getValues, setValue, errors, handleSubmit } = useForm({
+  const { register, getValues, setValuey, errors, handleSubmit } = useForm({
     defaultValues: {
       userId: '',
       userPswd: '',

src/containers/account/mypage/AccountMypageContainer.js

@@ -10,7 +10,7 @@ import {
     Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button,
     Modal, ModalHeader, ModalBody, ModalFooter
 } from 'reactstrap'
-
+import { accountApi } from '../../../modules/account/register/apis/accountApi';
 import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm';
 import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm';
 import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction';
@@ -34,13 +34,184 @@ const AccountMypageContainer = () => {
 
     const [userInfo, setUserInfo] = useState();
 
+    const [inputHpno, setInputHpno] = useState('');
+    const [inputCrtfy, setInputCrtfy] = useState('');
+    const [okinput, setOkinput] = useState(false)
+    const [okcheck, setOkcheck] = useState('');
+    const [isRunning, setIsRunning] = useState(false);
+    const [sendCount, setSendCount] = useState(0);
+    const [isCrtfy, setIsCrtfy] = useState(false);
+    const [minutes_Counter, setMinutes_Counter] = useState('03');
+    const [seconds_Counter, setSeconds_Counter] = useState('00');
+    const [timer, setTimer] = useState(null);
+
+    const [modal, setModal] = useState({
+        isOpen: false,
+        title: '',
+        desc: ''
+    });
+
+    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);
+                setInputCrtfy('crtfyhpNo', '');
+                // setCrtfyNo('');
+            }
+        }, 1000);
+
+        setTimer(timer);
+
+        return () => {
+            clearInterval(timer);
+        };
+    };
+
+    useEffect(() => {
+        if (userInfo) {
+            setOkcheck(!okinput ? userInfo.hpno : inputHpno)
+            console.log("okcheck>>>>>", okcheck);
+        }
+    }, [okinput])
+    //휴대폰 인증번호 보내기
+    const handlerSmsSend = async () => {
+        // const vData = getValues();
+
+        if (!inputHpno) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 발송',
+                desc: '휴대폰 번호를 입력 해주세요.'
+            });
+            return;
+        }
+        if (sendCount >= 3) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 발송',
+                desc: '인증번호 발송은 3회 까지만 가능합니다.'
+            });
+            return;
+        }
+        const res = await accountApi.crtfyhp(inputHpno);
+
+        if (!res.data.result) {
+            if (res.data.code === -1) {
+                setModal({
+                    isOpen: true,
+                    title: '인증번호 발송',
+                    desc: '이미 가입된 휴대폰 입니다.'
+                });
+            } else {
+                setModal({
+                    isOpen: true,
+                    title: '인증번호 발송',
+                    desc: '인증번호 발송을 실패하였습니다.'
+                });
+            }
+            return;
+        } else {
+            {
+                setModal({
+                    isOpen: true,
+                    title: '인증번호 발송',
+                    desc: '인증번호를 발송했습니다.'
+                });
+            }
+        }
+        // console.log(res);
+        if (isRunning) {
+            clearInterval(timer);
+        }
+        setIsRunning(true);
+        setSendCount(sendCount + 1);
+        timerStart(180);
+
+        // handlerSmsSend();
+    };
+    useEffect(() => {
+        // console.log('isRunning>>>', isRunning);
+        if (isRunning) {
+            clearInterval(timer);
+        } else {
+            // handlerSmsSend();
+        }
+
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    //휴대폰 인증하기
+    const handlerSmsConfirm = async () => {
+        //const vData = getValues();
+
+        if (!inputCrtfy || !inputHpno) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 인증',
+                desc: '휴대폰 번호를 입력 해주세요.'
+            });
+
+            return false;
+        }
+        if (!inputCrtfy) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 인증',
+                desc: '인증번호 를 입력 해주세요.'
+            });
+            return false;
+        }
+
+        const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
+
+        if (!res.data.result) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 인증',
+                desc: '인증번호 가 잘못 되었습니다.'
+            })
+        }
+        else if (res?.data.code === 0) {
+            setModal({
+                isOpen: true,
+                title: '인증번호 발송',
+                desc: '인증번호가 발송되었습니다.',
+                color: 'modal-primary'
+            })
+        } else {
+            setModal({
+                isOpen: true,
+                title: '인증번호 성공',
+                desc: '인증번호 성공했습니다.',
+                color: 'modal-primary'
+            })
+            setOkinput(!okinput);
+        }
+        setIsRunning(true);
+        setIsCrtfy(true);
+    };
+
+
     useEffect(() => {
         if (userPage)
-        setUserInfo(userPage[0])
+            setUserInfo(userPage[0])
     }, [userPage])
 
     const handlerInput = e => {
-
         const { name, value } = e.target;
         setUserInfo({
             ...userInfo,
@@ -58,12 +229,23 @@ const AccountMypageContainer = () => {
         setFormModal(!formModal)
     }
 
+    const handlerChange = (e) => {
+        const { name, value } = e.target;
+
+        if (name == 'hpno') {
+            setInputHpno(value);
+        } else if (name == 'crtfyhpNo') {
+            setInputCrtfy(value);
+        }
+    }
     //업데이트
     const handlerUpdate = () => {
+        debugger
         const param = {
             cstmrSno: user.cstmrSno,
             email: userInfo.email,
             updateUserId: userInfo.userId,
+            hpno: okcheck
         }
 
         dispatch(userupdateAction.request(param));
@@ -89,11 +271,21 @@ const AccountMypageContainer = () => {
             </div>
             {activeTab == 1 ? <AccountMypageForm
                 userInfo={userInfo}
-                toggle={toggle}
                 handler={handler}
                 formModal={formModal}
                 handlerUpdate={handlerUpdate}
                 handlerInput={handlerInput}
+                inputHpno={inputHpno}
+                inputCrtfy={inputCrtfy}
+                okinput={okinput}
+                handlerChange={handlerChange}
+                handlerSmsConfirm={handlerSmsConfirm}
+                modal={modal}
+                isRunning={isRunning}
+                minutes_Counter={minutes_Counter}
+                seconds_Counter={seconds_Counter}
+                handlerSmsSend={handlerSmsSend}
+                isCrtfy={isCrtfy}
             />
                 :
                 <></>
@@ -105,6 +297,29 @@ const AccountMypageContainer = () => {
                 :
                 <></>
             }
+            <div className='vertically-centered-modal'>
+                <Modal
+                    isOpen={modal.isOpen}
+                    toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+                    modalClassName='modal-danger'
+                    className='modal-dialog-centered'
+                >
+                    <ModalHeader
+                        toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+                    >
+                        {modal.title}
+                    </ModalHeader>
+                    <ModalBody>{modal.desc}</ModalBody>
+                    <ModalFooter>
+                        <Button
+                            color='danger'
+                            onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+                        >
+                            확인
+                        </Button>{' '}
+                    </ModalFooter>
+                </Modal>
+            </div>
             <MessageErrorModal />
             <MessageInfoModal />
         </div>

src/modules/account/register/apis/accountApi.ts

@@ -14,7 +14,6 @@ export const accountApi = {
       terms: data.agreeTerms
     };
     const res = await axios.post('api/acnt/cstmr/register', param);
-
     return res;
   },