마이페이지-업데이트 수정

src/components/account/mypage/AccountMypageForm.js

@@ -8,12 +8,148 @@ 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);
 
-const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
+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 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 (!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'>
@@ -55,18 +191,18 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
                                         <Col className='list-input' md='3' sm='12'>
                                             <FormGroup>
                                                 <Label for='userId'>ID</Label>
-                                                <Input type='text' id='userId' size='sm' placeholder='' value={userInfo[0].userId || ""} disabled />
+                                                <Input type='text' id='userId' size='sm' placeholder='' value={userInfo[0].userId || ""} diabled />
                                             </FormGroup>
                                         </Col>
                                         <Col className='list-input' md='3' sm='12'>
                                             <FormGroup>
                                                 <Label for='email'>E-mail</Label>
-                                                <Input type='text' id='email' size='sm' placeholder={userInfo[0].email || ""} />
+                                                <Input type='text' id='email' size='sm' placeholder='' value={userInfo[0].email}  onChange={handlerInput}  />
                                             </FormGroup>
                                         </Col>
                                         <Col className='list-input' md='3' sm='12'>
                                             <FormGroup>
-                                                <Label className='form-label' for='test'>
+                                                <Label className='form-label' for='clncd'>
                                                     휴대폰 번호
                                                 </Label>
                                                 <div className='user-phone-btn' >
@@ -74,7 +210,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
                                                         <span className='d-sm-inline-block'>변경</span>
                                                     </Button.Ripple>
                                                 </div>
-                                                <Input type='number' name='test' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} />
+                                                <Input type='number' name='clncd' id='hpno' size='sm' placeholder='' value={userInfo[0].hpno || ""} />
                                                 <div>
                                                     <Modal
                                                         isOpen={formModal}
@@ -99,10 +235,10 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
                                                                             </Col>
                                                                             <Col md='4' xs='12'>
                                                                                 {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
-                                                                                <span className='time d-none'>
-                                                                                    남은시간 : 3:00
+                                                                                <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
+                                                                                     남은시간 {minutes_Counter}:{seconds_Counter}
                                                                                 </span>
-                                                                                <Button.Ripple type='button' color='secondary'>
+                                                                                <Button.Ripple type='button' color='secondary'onClick={handlerSmsSend}>
                                                                                     <span className='d-sm-inline-block'>인증번호 발송</span>
                                                                                 </Button.Ripple>
                                                                             </Col>
@@ -113,11 +249,11 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
                                                                     <FormGroup>
                                                                         <Row className='input-inline-btn'>
                                                                             <Col md='8'>
-                                                                                <Label className='form-label' for='verifCode'>인증번호</Label>
+                                                                                <Label className='form-label' for='crtfyNo'>인증번호</Label>
                                                                                 <Input type='number' name='test' id='verifCode' size='sm' />
                                                                             </Col>
                                                                             <Col md='4' xs='12'>
-                                                                                <Button.Ripple type='button' color='secondary'>
+                                                                                <Button.Ripple type='button' color='secondary'onClick={handlerSmsConfirm}>
                                                                                     <span className='d-sm-inline-block'>인증하기</span>
                                                                                 </Button.Ripple>
                                                                             </Col>
@@ -151,6 +287,29 @@ const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
                     </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/register/AccountRegisterForm.js

@@ -605,7 +605,6 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
           </Button.Ripple>
         </div>
       </Form>
-
       <div className='vertically-centered-modal'>
         <Modal
           isOpen={modal.isOpen}

src/containers/account/mypage/AccountMypageContainer.js

@@ -17,6 +17,7 @@ import { userPageAction, userupdateAction } from '../../../modules/account/login
 
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 import { MessageInfoModal } from '../../../components/message/MessageInfoModal';
+import { USER_LIST } from '../../../modules/basis/group/actions/basisGroupAction';
 
 // ** Function to toggle tabs
 const AccountMypageContainer = () => {
@@ -33,11 +34,19 @@ const AccountMypageContainer = () => {
 
     const [userInfo, setUserInfo] = useState();
 
-
     useEffect(() => {
+        if(userPage)
         setUserInfo(userPage)
+        
     }, [userPage])
    
+    const handlerInput = e => {
+        const { name, value } = e.target;
+        setParams({
+          ...params,
+          [name]: value
+        });
+      };
 
     useEffect(() => {
         if (user) {
@@ -51,7 +60,13 @@ const AccountMypageContainer = () => {
 
     //업데이트
     const handlerUpdate = () => {
-        dispatch(userupdateAction.request(user));
+        const param = {
+            cstmrSno: user.cstmrSno,
+            email: userPage[0].email,
+            updateUserId : userPage[0].userId,
+        }
+        
+        dispatch(userupdateAction.request(param));
       };
  
     return (
@@ -85,6 +100,7 @@ const AccountMypageContainer = () => {
             {activeTab == 2 ?
             <AccountMypagePwForm     
               user={user}
+              handlerInput={handlerInput}
                 />
                 :
                 <></>

src/modules/account/login/actions/authAction.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { ActionType, createAsyncAction } from 'typesafe-actions';
-import { TokenAccount, UserAccount,UserPw, UserData, UserPageData } from '../models/authModel';
+import { TokenAccount, UserAccount,UserPw, UserData, UserPageData,UpdateData } from '../models/authModel';
 
 const USERS_LOGIN_REQUEST = 'auth/USERS_LOGIN_REQUEST';
 const USERS_LOGIN_SUCCESS = 'auth/USERS_LOGIN_SUCCESS';
@@ -56,7 +56,7 @@ export const userupdateAction = createAsyncAction(
   USERS_UPDATE_REQUEST,
   USERS_UPDATE_SUCCESS,
   USERS_UPDATE_FAILURE
-)<UserPageData, string, AxiosError>();
+)<UpdateData, UserPageData, AxiosError>();
 
 export const userPageAction = createAsyncAction(
   USERS_USERPAGE_REQUEST,

src/modules/account/login/apis/authApi.ts

@@ -1,5 +1,5 @@
 import axios from '../../../utils/customAxiosUtil';
-import { ResponseUser, UserAccount, TokenAccount, UserPageData,UserPw } from '../models/authModel';
+import { ResponseUser, UserAccount, TokenAccount, UserPageData,UserPw,UpdateData } from '../models/authModel';
 
 import qs from 'qs';
 
@@ -22,13 +22,11 @@ export const authAPI = {
   getUserPage: async(id: string) => {
     return await axios.get(`api/acnt/cstmr/profile/${id}`);
   },
-  updateUser: async (data: UserPageData) => {
-    const res = await axios.put('api/acnt/cstmr/update', data);
+  updateUser: async (data: UpdateData) => {
+    const res = await axios.put('api/acnt/cstmr/profile/update', data);
     return res;
   },
   pwupdate: async (data: UserPw) => {
      return await axios.post('api/acnt/cstmr/profile/pswdupdate', data);
-
   },
-  
 }

src/modules/account/login/models/authModel.ts

@@ -7,7 +7,9 @@ export interface TokenAccount {
   cstmrSno: number;
   refreshToken: string | null;
 }
-
+export interface MyPageFormData {
+  data: UserPageData | undefined;
+}
 export interface ResponseUser {
   resultData: {
     accessToken: string;
@@ -63,6 +65,7 @@ export interface UserPageState {
 }
 export interface UserPageData {
   memberName: string;
+  cstmrSno: string;
   birthdyDate: string;
   genderCd: string;
   cntryCd: string;
@@ -70,6 +73,13 @@ export interface UserPageData {
   hpno: string;
   userId: string;
 }
+export interface UpdateData {
+  email: string;
+  updateUserId: string;
+  cstmrSno: string;
+  updateDt:string;
+}
+
 export interface UserPw{
   cstmrSno:string;
   userPswd:string;

src/modules/account/login/reducers/authReducer.ts

@@ -95,3 +95,4 @@ export const authReducer = createReducer<AuthState, AuthAction>(initialState)
     })
   )
 
+ 

src/modules/account/login/sagas/authSaga.ts

@@ -146,13 +146,50 @@ function* userPageSaga(
   }
 }
 
+function* userUpdateSaga(
+  action: ActionType<typeof Actions.userupdateAction.request>) {
+  const param = action.payload;
+  try{
+    const { data,errorCode } = yield call(authAPI.updateUser, param);
+    yield put(Actions.pwUpdateAction.success(data));
+    if (data.errorCode==='-1') {
+      yield put(
+          MessageActions.IS_ERROR({
+            errorCode: ERROR_MESSAGE.code,
+            errorMessage: ERROR_MESSAGE.message,
+            isHistoryBack: false,
+            isRefresh: false
+        })
+      );
+    }
+    else{
+      yield put(
+      MessageActions.IS_MESSAGE({
+        messageCode: SAVE_MESSAGE.code,
+        message: SAVE_MESSAGE.message,
+        isHistoryBack: false,
+        isRefresh: true
+        })
+      );
+  }
+ } catch (error) {  
+    yield put(
+        MessageActions.IS_ERROR({
+        errorCode: ERROR_MESSAGE.code,
+        errorMessage: '처리 중 에러입니다.',
+        isHistoryBack: false,
+        isRefresh: false
+        })
+      );
+    }
+  }
 function* userPwSaga(
   action: ActionType<typeof Actions.pwUpdateAction.request>) {
   const param = action.payload;
   try{
     const { data,errorCode } = yield call(authAPI.pwupdate, param);
     //yield put(Actions.pwUpdateAction.success(data));
-    console.log("saaa",data.errorCode);  
+    console.log("saaa",data);  
     if (data.errorCode==='-1') {
       yield put(
           MessageActions.IS_ERROR({
@@ -234,5 +271,5 @@ export function* authSaga() {
   // yield takeEvery(Actions.refresh.request, refreshTokenSaga);
   yield takeEvery(Actions.userPageAction.request, userPageSaga);
   yield takeEvery(Actions.pwUpdateAction.request, userPwSaga);
-
+  yield takeEvery(Actions.userupdateAction.request, userUpdateSaga);
 }