From 2954517ed1fe67e778db6e5726b4d7d301968a3b Mon Sep 17 00:00:00 2001 From: sanguu Date: Thu, 1 Sep 2022 17:06:19 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A7=88=EC=9D=B4=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20components=20=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layouts/components/navbar/UserDropdown.js | 6 +- src/components/account/mypage/MypageForm.js | 156 ++++++++++++++++++ src/components/account/mypage/MypagePwForm.js | 51 ++++++ .../analysis/mypage/MypageContainer.js | 76 +++++++++ .../account/login/actions/authAction.ts | 16 +- src/modules/account/login/apis/authApi.ts | 8 +- src/modules/account/login/models/authModel.ts | 2 + .../account/login/reducers/authReducer.ts | 4 +- src/modules/account/login/sagas/authSaga.ts | 8 +- src/redux/reducers/rootReducer.ts | 3 + src/router/routes/RouteAccount.js | 8 +- src/router/routes/index.js | 2 +- src/views/Mypage/Mypage.js | 14 ++ .../{DesignMyinfo1.js => DesignMyInfo.js} | 68 +++----- 14 files changed, 365 insertions(+), 57 deletions(-) create mode 100644 src/components/account/mypage/MypageForm.js create mode 100644 src/components/account/mypage/MypagePwForm.js create mode 100644 src/containers/analysis/mypage/MypageContainer.js create mode 100644 src/views/Mypage/Mypage.js rename src/views/design/mypage/myinfo/{DesignMyinfo1.js => DesignMyInfo.js} (81%) diff --git a/src/@core/layouts/components/navbar/UserDropdown.js b/src/@core/layouts/components/navbar/UserDropdown.js index 37060cfd..95c14c27 100644 --- a/src/@core/layouts/components/navbar/UserDropdown.js +++ b/src/@core/layouts/components/navbar/UserDropdown.js @@ -60,7 +60,7 @@ const UserDropdown = () => { }; const profileInfo = () => { - history.push('/mypage/myinfo/sample1'); + history.push('/mypage/myinfo/'); }; return ( @@ -78,7 +78,9 @@ const UserDropdown = () => { - + Profile diff --git a/src/components/account/mypage/MypageForm.js b/src/components/account/mypage/MypageForm.js new file mode 100644 index 00000000..e2b4ec61 --- /dev/null +++ b/src/components/account/mypage/MypageForm.js @@ -0,0 +1,156 @@ +// ** React Imports +import { useState, useEffect } from 'react' + +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'; + +//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel'; +//const [detailData, setDetailData] = useState(userPage.UserPageData); + +const MypageForm = ({ userInfo, formModal }) => { + return ( + + + + + +
+ {userInfo ? + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ setFormModal(!formModal)}> + 변경 + +
+ +
+ setFormModal(!formModal)} + className='modal-dialog-centered' + > + setFormModal(!formModal)}> + 휴대폰번호 변경 + + +
+

휴대폰 번호 변경

+

변경할 휴대폰 번호로 인증을 완료해주세요.

+
+ + + + + + + + + + {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} + + 남은시간 : 3:00 + + + 인증번호 발송 + + + + + + + + + + + + + + + 인증하기 + + + + + + + + + + + +
+ + + + : <> + } +
+
+ 저장 + 취소 +
+ + + + + + + ) +} +export default MypageForm; diff --git a/src/components/account/mypage/MypagePwForm.js b/src/components/account/mypage/MypagePwForm.js new file mode 100644 index 00000000..1bc169dc --- /dev/null +++ b/src/components/account/mypage/MypagePwForm.js @@ -0,0 +1,51 @@ +// ** React Imports +import { useState, useEffect } from 'react' + +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 MypagePwForm = ({ userInfo, formModal }) => { + return ( + +
+ + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + +
+
+ 저장 + 취소 +
+ + ) +} +export default MypagePwForm; + diff --git a/src/containers/analysis/mypage/MypageContainer.js b/src/containers/analysis/mypage/MypageContainer.js new file mode 100644 index 00000000..7e97c27f --- /dev/null +++ b/src/containers/analysis/mypage/MypageContainer.js @@ -0,0 +1,76 @@ +// ** React Imports +import { useState, useEffect } from 'react' +import { useParams, Link } from 'react-router-dom' +import { useSelector, useDispatch } from 'react-redux' +// ** Styles +import '../../../assets/css/custom.css'; +// ** 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, Form, Input, Label, Button, + Modal, ModalHeader, ModalBody, ModalFooter +} from 'reactstrap' + +import MypagePwForm from '../../../components/account/mypage/MypagePwForm'; +import MypageForm from '../../../components/account/mypage/MypageForm'; +import { userPageAction } from '../../../modules/account/login/actions/authAction'; + +// ** Function to toggle tabs +const MypageContainer = () => { + const [activeTab, setActiveTab] = useState('1'), + store = useSelector(state => state.users), + dispatch = useDispatch(), + { id } = useParams() + + const toggle = tab => setActiveTab(tab) + const [formModal, setFormModal] = useState(false) + const { userPage } = useSelector(state => state.UserPageState); + const { user } = useSelector(state => state.authState); + const [userInfo, setUserInfo] = useState(); + + + useEffect(() => { + setUserInfo(userPage) + }, [userPage]) + + useEffect(() => { + if (user) { + dispatch(userPageAction.request(user.cstmrSno)); + } + }, []); + + return ( +
+
+ +
+ {activeTab == 1 ? + : + <> + } + {activeTab == 2 ? + + : + <> + } +
+ ) +} +export default MypageContainer; diff --git a/src/modules/account/login/actions/authAction.ts b/src/modules/account/login/actions/authAction.ts index 55dc0caa..ca330e99 100644 --- a/src/modules/account/login/actions/authAction.ts +++ b/src/modules/account/login/actions/authAction.ts @@ -14,10 +14,16 @@ const USERS_LOGOUT_REQUEST = 'auth/USERS_LOGOUT_REQUEST'; const USERS_LOGOUT_SUCCESS = 'auth/USERS_LOGOUT_SUCCESS'; const USERS_LOGOUT_FAILURE = 'auth/USERS_LOGOUT_FAILURE'; +//mypage list const USERS_USERPAGE_REQUEST = 'auth/USERS_USERPAGE_REQUEST'; const USERS_USERPAGE_SUCCESS = 'auth/USERS_USERPAGE_SUCCESS'; const USERS_USERPAGE_FAILURE = 'auth/USERS_USERPAGE_FAILURE'; +//# mypage update +const USERS_UPDATE_REQUEST = 'auth/USERS_UPDATE_REQUEST'; +const USERS_UPDATE_SUCCESS = 'auth/USERS_UPDATE_SUCCESS'; +const USERS_UPDATE_FAILURE = 'auth/USERS_UPDATE_FAILURE'; + export const login = createAsyncAction( USERS_LOGIN_REQUEST, USERS_LOGIN_SUCCESS, @@ -42,7 +48,13 @@ export const refresh = createAsyncAction( USERS_LOGOUT_FAILURE )(); -export const userPage = createAsyncAction( +export const USER_UPDATE = createAsyncAction( + USERS_UPDATE_REQUEST, + USERS_UPDATE_SUCCESS, + USERS_UPDATE_FAILURE +)(); + +export const userPageAction = createAsyncAction( USERS_USERPAGE_REQUEST, USERS_USERPAGE_SUCCESS, USERS_USERPAGE_FAILURE @@ -53,7 +65,7 @@ const actions = { check, logout, refresh, - userPage + userPageAction, }; export type AuthAction = ActionType; diff --git a/src/modules/account/login/apis/authApi.ts b/src/modules/account/login/apis/authApi.ts index 6a72b423..e85b2231 100644 --- a/src/modules/account/login/apis/authApi.ts +++ b/src/modules/account/login/apis/authApi.ts @@ -1,5 +1,5 @@ import axios from '../../../utils/customAxiosUtil'; -import { ResponseUser, UserAccount, TokenAccount } from '../models/authModel'; +import { ResponseUser, UserAccount, TokenAccount, UserPageData } from '../models/authModel'; import qs from 'qs'; @@ -21,6 +21,10 @@ 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); + return res; } - }; diff --git a/src/modules/account/login/models/authModel.ts b/src/modules/account/login/models/authModel.ts index bbe2908c..d54969cf 100644 --- a/src/modules/account/login/models/authModel.ts +++ b/src/modules/account/login/models/authModel.ts @@ -69,6 +69,8 @@ export interface UserPageData { email: string; hpno: string; userId: string; + updateuserId:string; + updateDt:string; } export const initResponseUserPageData = { diff --git a/src/modules/account/login/reducers/authReducer.ts b/src/modules/account/login/reducers/authReducer.ts index 45c5afd6..c43d8549 100644 --- a/src/modules/account/login/reducers/authReducer.ts +++ b/src/modules/account/login/reducers/authReducer.ts @@ -6,7 +6,7 @@ import { createReducer } from 'typesafe-actions'; // action import { AuthAction, - userPage, + userPageAction, check, login, logout, @@ -79,7 +79,7 @@ export const authReducer = createReducer(initialState) export const mypageReducer = createReducer( initResponseUserPageData - ).handleAction(userPage.success, (state, action) => + ).handleAction(userPageAction.success, (state, action) => produce(state, draft => { const data: UserPageData = action.payload; diff --git a/src/modules/account/login/sagas/authSaga.ts b/src/modules/account/login/sagas/authSaga.ts index d8ed7e35..4fd66247 100644 --- a/src/modules/account/login/sagas/authSaga.ts +++ b/src/modules/account/login/sagas/authSaga.ts @@ -126,16 +126,16 @@ function* userLogoutSaga() { } function* userPageSaga( - action: ActionType + action: ActionType ) { try{ const controlId = action.payload; const { data } = yield call(authAPI.getUserPage, controlId); console.log('userPageData : ', data) - yield put(Actions.userPage.success(data)); + yield put(Actions.userPageAction.success(data)); } catch (error) { - yield put(Actions.userPage.failure(error)); + yield put(Actions.userPageAction.failure(error)); } } @@ -144,5 +144,5 @@ export function* authSaga() { yield takeEvery(Actions.check.request, checkAuthencationSaga); yield takeEvery(Actions.logout.request, userLogoutSaga); // yield takeEvery(Actions.refresh.request, refreshTokenSaga); - yield takeEvery(Actions.userPage.request, userPageSaga); + yield takeEvery(Actions.userPageAction.request, userPageSaga); } diff --git a/src/redux/reducers/rootReducer.ts b/src/redux/reducers/rootReducer.ts index 29079c23..239ee432 100644 --- a/src/redux/reducers/rootReducer.ts +++ b/src/redux/reducers/rootReducer.ts @@ -14,6 +14,8 @@ import { dronSaga } from '../../modules/basis/dron/sagas/basisDronSaga'; import { groupReducer } from '../../modules/basis/group/reducers/basisGroupReducer'; import { basGroupSaga } from '../../modules/basis/group/sagas/basisGroupSaga'; import { messageReducer } from '../../modules/comn/message/reducers/comnMessageReducer'; +import { mypageReducer } from '../../modules/account/login/reducers/authReducer'; + import { controlGpDtlReducer, controlGpHisReducer, @@ -63,6 +65,7 @@ const rootReducer = combineReducers({ dronState: dronReducer, authState: authReducer, accountState: accountReducer, + UserPageState: mypageReducer, controlGpState: controlGpReducer, controlGpHisState: controlGpHisReducer, controlGpLogState: controlGpLogReducer, diff --git a/src/router/routes/RouteAccount.js b/src/router/routes/RouteAccount.js index bc2cc1d9..270e36d2 100644 --- a/src/router/routes/RouteAccount.js +++ b/src/router/routes/RouteAccount.js @@ -16,7 +16,13 @@ const RouteAccount = [ meta: { authRoute: true } - } + }, + { + path: '/mypage/myinfo/', + component: lazy(() => + import('../../views/Mypage/Mypage') + ) + }, ]; export default RouteAccount; diff --git a/src/router/routes/index.js b/src/router/routes/index.js index 8e3ba5f8..11889df6 100644 --- a/src/router/routes/index.js +++ b/src/router/routes/index.js @@ -160,7 +160,7 @@ const Routes = [ { path: '/mypage/myinfo/sample1', component: lazy(() => - import('../../views/design/mypage/myinfo/DesignMyinfo1') + import('../../views/design/mypage/myinfo/DesignMyInfo') ) }, { diff --git a/src/views/Mypage/Mypage.js b/src/views/Mypage/Mypage.js new file mode 100644 index 00000000..d7026b1b --- /dev/null +++ b/src/views/Mypage/Mypage.js @@ -0,0 +1,14 @@ +import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' +import { Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, + Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' +import React from 'react'; +import '../../assets/css/custom.css'; +import MypageContainer from '../../containers/analysis/mypage/MypageContainer'; + +const Mypage = props => { + return ( + + ); +}; + +export default Mypage; \ No newline at end of file diff --git a/src/views/design/mypage/myinfo/DesignMyinfo1.js b/src/views/design/mypage/myinfo/DesignMyInfo.js similarity index 81% rename from src/views/design/mypage/myinfo/DesignMyinfo1.js rename to src/views/design/mypage/myinfo/DesignMyInfo.js index 7fa930a3..e040fd08 100644 --- a/src/views/design/mypage/myinfo/DesignMyinfo1.js +++ b/src/views/design/mypage/myinfo/DesignMyInfo.js @@ -1,18 +1,16 @@ // ** 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, Form, Input, Label, Button, +import { Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' // ** Styles import '../../../../assets/css/custom.css'; - - const UserEdit = () => { // ** States & Vars const [activeTab, setActiveTab] = useState('1'), @@ -24,16 +22,6 @@ 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 (
@@ -68,20 +56,20 @@ const UserEdit = () => { - - + + - - + + - - + + @@ -89,8 +77,8 @@ const UserEdit = () => { - - + + @@ -98,14 +86,14 @@ const UserEdit = () => { - - + + - - + + @@ -118,7 +106,7 @@ const UserEdit = () => { 변경
- +
{ - - + + {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */} @@ -157,8 +145,8 @@ const UserEdit = () => { - - + + @@ -194,26 +182,20 @@ const UserEdit = () => { -
- - -
+ + -
- - -
+ + -
- - -
+ +