mypage(작업중)

src/components/account/mypage/AccountMypageForm.js

@@ -12,7 +12,7 @@ import '../../../assets/css/custom.css';
 //import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
 //const [detailData, setDetailData] = useState(userPage.UserPageData);
 
-const AccountMypageForm = ({ userInfo, handler, formModal}) => {
+const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => {
 
     return (
         <Row className='app-user-edit'>
@@ -143,7 +143,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal}) => {
                                 }
                             </div>
                             <div className='d-flex align-items-center'>
-                                <Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple>
+                                <Button.Ripple className='mr-1' color='primary' size='sm' onClick={handlerUpdate}>저장</Button.Ripple>
                                 <Button.Ripple color='danger' size='sm'>취소</Button.Ripple>
                             </div>
                         </TabPane>

src/components/account/mypage/AccountMypagePwForm.js

@@ -1,50 +1,94 @@
 // ** React Imports
 import { useState, useEffect } from 'react'
-
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useForm } from 'react-hook-form';
+import { useSelector, useDispatch } from 'react-redux'
 import {
-    Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button,
+    Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup,FormFeedback, Form, Input, Label, Button,
     Modal, ModalHeader, ModalBody, ModalFooter
 } from 'reactstrap'
-
 // ** Styles
 import '../../../assets/css/custom.css';
+import classnames from 'classnames';
+import { pwUpdateAction } from '../../../modules/account/login/actions/authAction';
+
+  const SignupSchema = yup.object().shape({
+    userPswd: yup
+    .string()
+    .required('비밀번호를 입력주세요.'),
+    newPswd: yup
+    .string()
+    .required('비밀번호를 입력주세요.')
+    .matches(
+      /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/,
+      '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'),
+    pswdCheck: yup
+    .string()
+    .required('비밀번호 확인을 입력해 주세요.')
+    .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.')
+});
 
-const AccountMypagePwForm = ({ userInfo, formModal }) => {
+const AccountMypagePwForm = ({user}) => {
+  
+  const { register,errors,handleSubmit } = useForm({
+    defaultValues: {
+      cstmrSno: user.cstmrSno,
+      userPswd: '',
+      newPswd: '',
+      newPswdConfirm: ''
+    },
+    resolver: yupResolver(SignupSchema)
+  });
+  const dispatch = useDispatch();
+  const onSubmit = data => {
+    console.log("sdds",data);
+    dispatch(pwUpdateAction.request(data));
+  }
+//   const res = await pwAPI.register({
+//     data: data,
+//     agreeTerms: agreeTerms
+//   });
     return (
+        <form onSubmit={handleSubmit(onSubmit)}>
         <TabPane tabId='2'>
             <div className='search-info-box'>
                 <Row>
                     <Col className='list-input' md='3' sm='12'>
                         <FormGroup>
-                            <Form>
                                 <Label for='userPswd'>기존 비밀번호</Label>
-                                <Input type='password' id='userPswd' size='sm' autocomplete='off' placeholder='' />
-                            </Form>
+                                <Input type='password' innerRef={register} id='userPswd'name="userPswd" size='sm'autocomplete='off'   placeholder=''className={classnames({'is-invalid': errors.userPswd})}/>
+                                {errors && errors.userPswd && (
+                                 <FormFeedback>{errors.userPswd.message} </FormFeedback>
+                                 )}
                         </FormGroup>
                     </Col>
                     <Col className='list-input' md='3' sm='12'>
                         <FormGroup>
-                            <Form>
                                 <Label for='newPswd'>새로운 비밀번호</Label>
-                                <Input type='password' id='newPswd' size='sm' autocomplete='off' placeholder='' />
-                            </Form>
+                                <Input type='password' id='newPswd' innerRef={register} name="newPswd"size='sm' autocomplete='off' placeholder='' className={classnames({'is-invalid': errors.newPswd})}/>
+                                {errors && errors.newPswd && (
+                                 <FormFeedback>{errors.newPswd.message} </FormFeedback>
+                                )}
                         </FormGroup>
                     </Col>
                     <Col className='list-input' md='3' sm='12'>
                         <FormGroup>
-                            <Form>
-                                <Label for='pswdCheck'>새로운 비밀번호 확인</Label>
-                                <Input type='password' id='pswdCheck' size='sm' autocomplete='off' placeholder='' />
-                            </Form>
+                                <Label for='newPswdConfirm'>새로운 비밀번호 확인</Label>
+                                <Input type='password' id='newPswdConfirm'innerRef={register} name="pswdCheck"size='sm' autocomplete='off' placeholder='' className={classnames({'is-invalid': errors.newPswdConfirm})} />
+                                {errors && errors.newPswdConfirm && (
+                                 <FormFeedback>{errors.newPswdConfirm.message} </FormFeedback>
+                                )}
                         </FormGroup>
                     </Col>
                 </Row>
             </div>
             <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple>
+                <Button.Ripple className='mr-1' color='primary' type="submit" size='sm'>저장</Button.Ripple>
                 <Button.Ripple color='danger' size='sm'>취소</Button.Ripple>
             </div>
         </TabPane>
+        </form>
     )
 }
 export default AccountMypagePwForm;

src/containers/account/mypage/AccountMypageContainer.js

@@ -13,7 +13,7 @@ import {
 
 import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm';
 import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm';
-import { userPageAction } from '../../../modules/account/login/actions/authAction';
+import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction';
 
 // ** Function to toggle tabs
 const AccountMypageContainer = () => {
@@ -35,14 +35,21 @@ const AccountMypageContainer = () => {
 
     useEffect(() => {
         if (user) {
+            console.log(">>>",user);
             dispatch(userPageAction.request(user.cstmrSno));
         }
     }, []);
-
+    
     const handler = () => {
       setFormModal(!formModal)
     }
 
+    //업데이트
+    const handlerUpdate = () => {
+        dispatch(userupdateAction.request(user));
+      };
+
+    
     return (
         <div className='pal-card'>
             <div className='card-body-tab-menu'>
@@ -66,12 +73,17 @@ const AccountMypageContainer = () => {
                 toggle={toggle}
                 handler={handler}
                 formModal={formModal}
+                handlerUpdate={handlerUpdate}
             />
                 :
                 <></>
             }
             {activeTab == 2 ?
-                <AccountMypagePwForm />
+                <AccountMypagePwForm 
+                user={user}
+                //pwsubmit={pwsubmit}
+                //pwdata={pwdata}
+                />
                 :
                 <></>
             }

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

@@ -24,6 +24,10 @@ const USERS_UPDATE_REQUEST = 'auth/USERS_UPDATE_REQUEST';
 const USERS_UPDATE_SUCCESS = 'auth/USERS_UPDATE_SUCCESS';
 const USERS_UPDATE_FAILURE = 'auth/USERS_UPDATE_FAILURE';
 
+const USERS_PWUPDATE_REQUEST = 'auth/USERS_PWUPDATE_REQUEST';
+const USERS_PWUPDATE_SUCCESS = 'auth/USERS_PWUPDATE_SUCCESS';
+const USERS_PWUPDATE_FAILURE = 'auth/USERS_PWUPDATE_FAILURE';
+
 export const login = createAsyncAction(
   USERS_LOGIN_REQUEST,
   USERS_LOGIN_SUCCESS,
@@ -48,7 +52,7 @@ export const refresh = createAsyncAction(
   USERS_LOGOUT_FAILURE
 )<TokenAccount, UserData, AxiosError>();
 
-export const USER_UPDATE = createAsyncAction(
+export const userupdateAction = createAsyncAction(
   USERS_UPDATE_REQUEST,
   USERS_UPDATE_SUCCESS,
   USERS_UPDATE_FAILURE
@@ -60,12 +64,19 @@ export const userPageAction = createAsyncAction(
   USERS_USERPAGE_FAILURE
 )<string, UserPageData, AxiosError>();
 
+export const pwUpdateAction = createAsyncAction(
+  USERS_PWUPDATE_REQUEST,
+  USERS_PWUPDATE_SUCCESS,
+  USERS_PWUPDATE_FAILURE
+)<UserPageData, UserData, AxiosError>();
+
 const actions = {
   login,
   check,
   logout,
   refresh,
   userPageAction,
+  pwUpdateAction
 };
 
 export type AuthAction = ActionType<typeof actions>;

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

@@ -23,8 +23,11 @@ export const authAPI = {
     return await axios.get(`api/acnt/cstmr/profile/${id}`);
   },
   updateUser: async (data: UserPageData) => {
-  
     const res = await axios.put('api/acnt/cstmr/update', data);
     return res;
-  }
-};
+  },
+  pwupdate: async (data: UserPageData) => {
+    return await axios.post('api/acnt/cstmr/register', data);
+    },
+  
+}

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

@@ -69,8 +69,6 @@ export interface UserPageData {
   email: string;
   hpno: string;
   userId: string;
-  updateuserId:string;
-  updateDt:string;
 }
 
 export const initResponseUserPageData = {

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

@@ -85,4 +85,6 @@ export const authReducer = createReducer<AuthState, AuthAction>(initialState)
 
       draft.userPage = data;
     })
-  )
+  )
+
+ 

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

@@ -139,6 +139,49 @@ function* userPageSaga(
   }
 }
 
+// function* updateSaga(action: ActionType<typeof Actions.userupdateAction.request>) {
+//   try {
+//     const detail = action.payload;
+//     const res = yield call(Apis.dronAPI.update, detail);
+
+//     const { data } = res;
+
+//     if (data.result) {
+//       yield put(
+//         MessageActions.IS_MESSAGE({
+//           messageCode: SAVE_MESSAGE.code,
+//           message: SAVE_MESSAGE.message,
+//           isHistoryBack: true,
+//           isRefresh: false
+//         })
+//       );
+//     } else {
+//       if (data.errorCode === 'DT002') {
+//         yield put(
+//           MessageActions.IS_ERROR({
+//             errorCode: DUPLATE_MESSAGE.code,
+//             errorMessage: '제작번호 ' + DUPLATE_MESSAGE.message,
+//             isHistoryBack: false,
+//             isRefresh: false
+//           })
+//         );
+//       } else {
+//         throw Error;
+//       }
+//     }
+//   } catch (error) {
+//     yield put(
+//       MessageActions.IS_ERROR({
+//         errorCode: ERROR_MESSAGE.code,
+//         errorMessage: ERROR_MESSAGE.message,
+//         isHistoryBack: false,
+//         isRefresh: false
+//       })
+//     );
+//     // yield put(Actions.GROUP_UPDATE.failure(error));
+//   }
+// }
+
 export function* authSaga() {
   yield takeEvery(Actions.login.request, userLoginSaga);
   yield takeEvery(Actions.check.request, checkAuthencationSaga);