마이페이지 - api 연결

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

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { ActionType, createAsyncAction } from 'typesafe-actions';
-import { TokenAccount, UserAccount, UserData } from '../models/authModel';
+import { TokenAccount, UserAccount, UserData, UserPageData } from '../models/authModel';
 
 const USERS_LOGIN_REQUEST = 'auth/USERS_LOGIN_REQUEST';
 const USERS_LOGIN_SUCCESS = 'auth/USERS_LOGIN_SUCCESS';
@@ -14,6 +14,10 @@ const USERS_LOGOUT_REQUEST = 'auth/USERS_LOGOUT_REQUEST';
 const USERS_LOGOUT_SUCCESS = 'auth/USERS_LOGOUT_SUCCESS';
 const USERS_LOGOUT_FAILURE = 'auth/USERS_LOGOUT_FAILURE';
 
+const USERS_USERPAGE_REQUEST = 'auth/USERS_USERPAGE_REQUEST';
+const USERS_USERPAGE_SUCCESS = 'auth/USERS_USERPAGE_SUCCESS';
+const USERS_USERPAGE_FAILURE = 'auth/USERS_USERPAGE_FAILURE';
+
 export const login = createAsyncAction(
   USERS_LOGIN_REQUEST,
   USERS_LOGIN_SUCCESS,
@@ -38,11 +42,18 @@ export const refresh = createAsyncAction(
   USERS_LOGOUT_FAILURE
 )<TokenAccount, UserData, AxiosError>();
 
+export const userPage = createAsyncAction(
+  USERS_USERPAGE_REQUEST,
+  USERS_USERPAGE_SUCCESS,
+  USERS_USERPAGE_FAILURE
+)<string, UserPageData, AxiosError>();
+
 const actions = {
   login,
   check,
   logout,
-  refresh
+  refresh,
+  userPage
 };
 
 export type AuthAction = ActionType<typeof actions>;

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

@@ -17,5 +17,10 @@ export const authAPI = {
   },
   refreshToken: (data: TokenAccount) => {
     return axios.post('api/acnt/jwt/refresh', data);
+  },
+
+  getUserPage: async(id: string) => {
+    return await axios.get(`api/acnt/cstmr/profile/${id}`);
   }
+
 };

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

@@ -56,3 +56,21 @@ export interface UserData {
   authLevel: string;
   authNm: string;
 }
+
+
+export interface UserPageState {
+  userPage: UserPageData | undefined;
+}
+export interface UserPageData {
+  memberName: string;
+  birthdyDate: string;
+  genderCd: string;
+  cntryCd: string;
+  email: string;
+  hpno: string;
+  userId: string;
+}
+
+export const initResponseUserPageData = {
+  userPage: undefined
+}

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

@@ -6,13 +6,14 @@ import { createReducer } from 'typesafe-actions';
 // action
 import {
   AuthAction,
+  userPage,
   check,
   login,
   logout,
   refresh
 } from '../actions/authAction';
 
-import { UserData } from '../models/authModel';
+import { UserPageState, UserPageData, initResponseUserPageData, UserData } from '../models/authModel';
 
 export interface AuthState {
   pageLoading: boolean;
@@ -31,6 +32,7 @@ const initialState: AuthState = {
   message: ''
 };
 
+
 export const authReducer = createReducer<AuthState, AuthAction>(initialState)
   .handleAction(login.success, (state, action) =>
     produce(state, draft => {
@@ -74,3 +76,13 @@ export const authReducer = createReducer<AuthState, AuthAction>(initialState)
       draft.user = undefined;
     })
   );
+
+  export const mypageReducer = createReducer<UserPageState, AuthAction>(
+    initResponseUserPageData
+  ).handleAction(userPage.success, (state, action) =>
+    produce(state, draft => {
+      const data: UserPageData = action.payload;
+
+      draft.userPage = data;
+    })
+  )

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

@@ -125,9 +125,24 @@ function* userLogoutSaga() {
   }
 }
 
+function* userPageSaga(
+  action: ActionType<typeof Actions.userPage.request>
+) {
+  try{
+    const controlId = action.payload;
+
+    const { data } = yield call(authAPI.getUserPage, controlId);
+    console.log('userPageData : ', data)
+    yield put(Actions.userPage.success(data));
+  } catch (error) {
+    yield put(Actions.userPage.failure(error));
+  }
+}
+
 export function* authSaga() {
   yield takeEvery(Actions.login.request, userLoginSaga);
   yield takeEvery(Actions.check.request, checkAuthencationSaga);
   yield takeEvery(Actions.logout.request, userLogoutSaga);
   // yield takeEvery(Actions.refresh.request, refreshTokenSaga);
+  yield takeEvery(Actions.userPage.request, userPageSaga);
 }

src/views/design/mypage/myinfo/DesignMyinfo1.js

@@ -1,16 +1,18 @@
 // ** React Imports
 import { useState, useEffect } from 'react'
 import { useParams, Link } from 'react-router-dom'
-
 import { useSelector, useDispatch } from 'react-redux'
+import { userPage } from '../../../../modules/account/login/actions/authAction';
 
 // ** Third Party Components
 import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
-import { Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+import { Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button,
   Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
 
 // ** Styles
 import '../../../../assets/css/custom.css';
+
+
 const UserEdit = () => {
   // ** States & Vars
   const [activeTab, setActiveTab] = useState('1'),
@@ -22,6 +24,16 @@ const UserEdit = () => {
   const toggle = tab => setActiveTab(tab)
   const [formModal, setFormModal] = useState(false)
 
+  const { user } = useSelector(state => state.authState);
+  //const { userPage } = useSelector(state => state.UserPageState);
+
+  useEffect(() => {
+    if(user) {
+      dispatch(userPage.request(user.cstmrSno));
+    }
+  }, []);
+
+
   return (
     <div className='pal-card'>
       <div className='card-body-tab-menu'>
@@ -56,20 +68,20 @@ const UserEdit = () => {
                     <Row>                     
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>이름</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' value='홍길동' disabled/>
+                          <Label for='memberName'>이름</Label>
+                          <Input type='text' id='memberName' size='sm' placeholder='' value='홍길동' disabled/>
                         </FormGroup>
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>생년월일</Label>
-                          <Input type='number' id='test' size='sm' placeholder='' value='19950915' disabled />
+                          <Label for='brithdyDate'>생년월일</Label>
+                          <Input type='number' id='brithdyDate' size='sm' placeholder='' value='19950915' disabled />
                         </FormGroup>
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>성별</Label>
-                          <Input type='select' name='select' size='sm' id='test' value='여자' disabled >
+                          <Label for='cenderCD'>성별</Label>
+                          <Input type='select' name='select' size='sm' id='cenderCD' value='여자' disabled >
                               <option>남자</option>
                               <option>여자</option>                       
                           </Input>
@@ -77,8 +89,8 @@ const UserEdit = () => {
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>국가코드</Label>
-                          <Input type='select' name='select' size='sm' id='test' >
+                          <Label for='cntryCD'>국가코드</Label>
+                          <Input type='select' name='select' size='sm' id='cntryCD' >
                               <option>대한민국</option>
                               <option>2</option>                       
                           </Input>
@@ -86,14 +98,14 @@ const UserEdit = () => {
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>ID</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' value='admin' disabled />
+                          <Label for='userId'>ID</Label>
+                          <Input type='text' id='userId' size='sm' placeholder='' value='admin' disabled />
                         </FormGroup>
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
                         <FormGroup>
-                          <Label for='test'>E-mail</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
+                          <Label for='email'>E-mail</Label>
+                          <Input type='text' id='email' size='sm' placeholder='' />
                         </FormGroup>
                       </Col>
                       <Col className='list-input' md='3' sm='12'>
@@ -106,7 +118,7 @@ const UserEdit = () => {
                               <span className='d-sm-inline-block'>변경</span>
                             </Button.Ripple>
                           </div>
-                          <Input type='number' name='test' id='test' size='sm' placeholder='010-0000-0000'/>
+                          <Input type='number' name='test' id='hpno' size='sm' placeholder='010-0000-0000'/>
                           <div>
                             <Modal
                               isOpen={formModal}
@@ -126,8 +138,8 @@ const UserEdit = () => {
                                     <FormGroup>
                                      <Row className='input-inline-btn'>
                                         <Col md='8'>
-                                          <Label className='form-label' for='test'>휴대폰 번호</Label>
-                                          <Input type='number' name='test' id='test' size='sm' />
+                                          <Label className='form-label' for='hpno'>휴대폰 번호</Label>
+                                          <Input type='number' name='test' id='hpno' size='sm' />
                                         </Col>
                                         <Col md='4' xs='12'>  
                                          {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} 
@@ -145,8 +157,8 @@ const UserEdit = () => {
                                     <FormGroup>
                                       <Row className='input-inline-btn'>
                                         <Col md='8'>
-                                          <Label className='form-label' for='test'>인증번호</Label>
-                                          <Input type='number' name='test' id='test' size='sm' />
+                                          <Label className='form-label' for='verifCode'>인증번호</Label>
+                                          <Input type='number' name='test' id='verifCode' size='sm' />
                                         </Col>
                                         <Col md='4' xs='12'>                        
                                           <Button.Ripple type='button' color='secondary'>
@@ -181,22 +193,28 @@ const UserEdit = () => {
                 <div className='search-info-box'>
                     <Row>                     
                       <Col className='list-input' md='3' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>기존 비밀번호</Label>
-                          <Input type='password' id='test' size='sm' placeholder='' />
-                        </FormGroup>
+                        {/* <FormGroup> */}
+                        <Form>
+                          <Label for='userPswd'>기존 비밀번호</Label>
+                          <Input type='password' id='userPswd' size='sm' autocomplete='off' placeholder='' />
+                        </Form>
+                        {/* </FormGroup> */}
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>새로운 비밀번호</Label>
-                          <Input type='password' id='test' size='sm' placeholder='' />
-                        </FormGroup>
+                        {/* <FormGroup> */}
+                        <Form>
+                          <Label for='newPswd'>새로운 비밀번호</Label>
+                          <Input type='password' id='newPswd' size='sm' autocomplete='off' placeholder='' />
+                        </Form>
+                        {/* </FormGroup> */}
                       </Col>
                       <Col className='list-input' md='3' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>새로운 비밀번호 확인</Label>
-                          <Input type='password' id='test' size='sm' placeholder='' />
-                        </FormGroup>
+                        {/* <FormGroup> */}
+                        <Form>
+                          <Label for='pswdCheck'>새로운 비밀번호 확인</Label>
+                          <Input type='password' id='pswdCheck' size='sm' autocomplete='off' placeholder='' />
+                        </Form>
+                        {/* </FormGroup> */}
                       </Col>                                                                                                 
                     </Row>
                   </div>