[프로필] 휴대폰 번호 11자리 제한 및 알람모달 색상 수정

src/components/account/mypage/AccountMypageForm.js

@@ -103,7 +103,7 @@ const AccountMypageForm = ({ userInfo,handlerSmsSend,isCrtfy,seconds_Counter,han
                                     <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={inputHpno} onChange={handlerChange} placeholder='01000000000' />
+                                        <Input type='number' name='hpno' id='hpno' bsSize='sm' value={inputHpno} onChange={handlerChange} placeholder='01012345678' />
                                       </Col>
                                       <Col md='4' xs='12'>
                                         {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}

src/containers/account/mypage/AccountMypageContainer.js

@@ -48,7 +48,8 @@ const AccountMypageContainer = () => {
     const [modal, setModal] = useState({
         isOpen: false,
         title: '',
-        desc: ''
+        desc: '',
+        color: ''
     });
 
     const timerStart = count => {
@@ -69,6 +70,12 @@ const AccountMypageContainer = () => {
                 setIsRunning(false);
                 setInputCrtfy('crtfyhpNo', '');
                 // setCrtfyNo('');
+                setModal({
+                    isOpen: true,
+                    title: '인증번호 만료',
+                    desc: '인증번호가 만료되었습니다.',
+                    color: 'modal-danger'
+                  })
             }
         }, 1000);
 
@@ -92,7 +99,8 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 발송',
-                desc: '휴대폰 번호를 입력 해주세요.'
+                desc: '휴대폰 번호를 입력 해주세요.',
+                color: 'modal-danger'
             });
             return;
         }
@@ -100,7 +108,8 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 발송',
-                desc: '인증번호 발송은 3회 까지만 가능합니다.'
+                desc: '인증번호 발송은 3회 까지만 가능합니다.',
+                color: 'modal-danger'
             });
             return;
         }
@@ -111,13 +120,15 @@ const AccountMypageContainer = () => {
                 setModal({
                     isOpen: true,
                     title: '인증번호 발송',
-                    desc: '이미 가입된 휴대폰 입니다.'
+                    desc: '이미 가입된 휴대폰 입니다.',
+                    color: 'modal-danger'
                 });
             } else {
                 setModal({
                     isOpen: true,
                     title: '인증번호 발송',
-                    desc: '인증번호 발송을 실패하였습니다.'
+                    desc: '인증번호 발송을 실패하였습니다.',
+                    color: 'modal-danger'
                 });
             }
             return;
@@ -126,7 +137,8 @@ const AccountMypageContainer = () => {
                 setModal({
                     isOpen: true,
                     title: '인증번호 발송',
-                    desc: '인증번호를 발송했습니다.'
+                    desc: '인증번호를 발송했습니다.',
+                    color: 'modal-primary'
                 });
             }
         }
@@ -161,7 +173,8 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 인증',
-                desc: '휴대폰 번호를 입력 해주세요.'
+                desc: '휴대폰 번호를 입력 해주세요.',
+                color: 'modal-danger'
             });
 
             return false;
@@ -170,7 +183,8 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 인증',
-                desc: '인증번호 를 입력 해주세요.'
+                desc: '인증번호 를 입력 해주세요.',
+                color: 'modal-danger'
             });
             return false;
         }
@@ -181,7 +195,8 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 인증',
-                desc: '인증번호 가 잘못 되었습니다.'
+                desc: '인증번호 가 잘못 되었습니다.',
+                color: 'modal-danger'
             })
         }
         else if (res?.data.code === 0) {
@@ -195,7 +210,7 @@ const AccountMypageContainer = () => {
             setModal({
                 isOpen: true,
                 title: '인증번호 성공',
-                desc: '인증번호 성공했습니다.',
+                desc: '인증되었습니다',
                 color: 'modal-primary'
             })
             setOkinput(!okinput);
@@ -228,13 +243,23 @@ const AccountMypageContainer = () => {
         setFormModal(!formModal)
     }
 
+    let hpno = '';
+    let crtfyhp = '';
     const handlerChange = (e) => {
         const { name, value } = e.target;
 
         if (name == 'hpno') {
-            setInputHpno(value);
+            const regex =  /^[0-9]{0,11}$/;
+            if(regex.test(value)){
+                hpno = value;
+                setInputHpno(hpno)
+            }
         } else if (name == 'crtfyhpNo') {
-            setInputCrtfy(value);
+            const regex = /^[0-9]{0,6}$/;
+            if(regex.test(value)) {
+                crtfyhp = value;
+                setInputCrtfy(crtfyhp)
+            }
         }
     }
     //업데이트
@@ -299,7 +324,7 @@ const AccountMypageContainer = () => {
                 <Modal
                     isOpen={modal.isOpen}
                     toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-                    modalClassName='modal-danger'
+                    modalClassName={modal.color}
                     className='modal-dialog-centered'
                 >
                     <ModalHeader