redux user state props로 변경

src/@core/layouts/components/navbar/UserDropdown.js

@@ -18,15 +18,26 @@ import {
   UncontrolledDropdown
 } from '@component/ui';
 import { setLogout } from '@src/_redux/features/account/auth/authThunk';
+import {
+  COOKIE_ACCESS_TOKEN,
+  COOKIE_REFRESH_TOKEN,
+  cookieStorage
+} from '@src/modules/account/auth/service/cookie';
 
 const UserDropdown = () => {
   // ** Store Vars
   const dispatch = useDispatch();
   const history = useHistory();
-  const { isLogin, user } = useSelector(state => state.authState);
+  const { user } = useSelector(state => state.authState);
 
   const handelrLogout = async () => {
-    dispatch(setLogout());
+    const { payload } = await dispatch(setLogout());
+    console.log(payload);
+    if (payload === 'SUCCESS') {
+      cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN);
+      cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN);
+      history.push('/account/login');
+    }
   };
 
   // useEffect(() => {

src/_redux/features/account/auth/authThunk.ts

@@ -48,11 +48,7 @@ export const setLogin = createAsyncThunk(
       cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken);
       cookieStorage.setCookie(COOKIE_REFRESH_TOKEN, data.refreshToken);
 
-      const { data: user }: { data: ICheckAuthencationRs } = await axios.get(
-        `api/acnt/jwt/profile/${data.cstmrSno}`
-      );
-
-      return user;
+      thunkAPI.dispatch(checkCookie());
     } catch (error) {
       thunkAPI.dispatch(
         openModal({
@@ -109,14 +105,8 @@ export const setLogout = createAsyncThunk(
           `api/acnt/jwt/logout/${decodedToken.cstmrSno}`
         );
 
-        if (data === 'SUCCESS') location.href = '/account/login';
+        return data;
       }
-
-      cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN);
-      cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN);
-
-      // yield put(replace('/'));
-      location.href = '/';
     } catch (error) {
       thunkAPI.dispatch(
         openModal({
@@ -287,3 +277,25 @@ export const updateUserPw = createAsyncThunk(
     }
   }
 );
+
+export const checkToken = createAsyncThunk(
+  'account/checkToken',
+  async (_, thunkAPI) => {
+    try {
+      const { data }: { data: boolean } = await axios.get(
+        '/api/acnt/jwt/valid/token'
+      );
+      thunkAPI.dispatch(checkCookie());
+      return data;
+    } catch (error) {
+      thunkAPI.dispatch(
+        openModal({
+          errorCode: ERROR_MESSAGE.code,
+          errorMessage: ERROR_MESSAGE.message,
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  }
+);

src/components/account/login/AccountLogin.js

@@ -15,12 +15,9 @@ import kacLogo from '../../../assets/images/logo/kac_logo.svg';
 import { setLogin } from '@src/_redux/features/account/auth/authThunk';
 import { openModal } from '@src/_redux/features/comn/message/messageSlice';
 
-export const AccountLogin = ({ props }) => {
+export const AccountLogin = ({ history }) => {
   const dispatch = useDispatch();
 
-  // 로그인 결과
-  const { isLogin } = useSelector(state => state.authState);
-
   // 로그인 폼
   const [loginForm, setLoginForm] = useState({
     userId: '',
@@ -47,7 +44,7 @@ export const AccountLogin = ({ props }) => {
   };
 
   // 로그인 유효성검사 핸들러
-  const handelrLogin = () => {
+  const handelrLogin = async () => {
     if (!loginForm.userId) {
       dispatch(
         openModal({
@@ -66,16 +63,13 @@ export const AccountLogin = ({ props }) => {
       return;
     }
 
-    dispatch(setLogin(loginForm));
+    const { meta } = await dispatch(setLogin(loginForm));
+    console.log(meta);
+    if (meta.requestStatus === 'fulfilled') {
+      history.push('/control');
+    }
   };
 
-  // 로그인 성공시 메인화면으로 이동
-  useEffect(() => {
-    if (isLogin) {
-      // LANCC 화면으로 이동
-      props.history.replace('/control');
-    }
-  }, [isLogin]);
   return (
     <>
       <div className='login'>
@@ -106,7 +100,6 @@ export const AccountLogin = ({ props }) => {
                   placeholder='ID'
                   name='userId'
                   value={loginForm.userId}
-                  onKeyPress={onKeyPress}
                   onChange={handelrChange}
                 />
               </InputGroup>
@@ -123,13 +116,16 @@ export const AccountLogin = ({ props }) => {
                   type='password'
                   name='userPswd'
                   value={loginForm.userPswd}
-                  onKeyPress={onKeyPress}
                   onChange={handelrChange}
                 />
               </InputGroup>
             </FormGroup>
             <div className='full-btn'>
-              <Button color='primary' onClick={handelrLogin}>
+              <Button
+                color='primary'
+                onClick={handelrLogin}
+                onKeyPress={onKeyPress}
+              >
                 로그인
               </Button>
             </div>

src/containers/basis/dron/BasisDronContainer.js

@@ -17,18 +17,15 @@ import {
   getJoinGroupList
 } from '@src/_redux/features/basis/group/groupThunk';
 
-export const BasisDronContainer = props => {
+export const BasisDronContainer = ({ history, user }) => {
   const dispatch = useDispatch();
 
-  const history = useHistory();
-
   // 기체 목록, 총 기체 수, 현재 활성화한 그룹 정보
   const { droneList, droneTotal, selectGroup } = useSelector(
     state => state.droneState
   );
 
   // 유저 정보
-  const { user } = useSelector(state => state.authState, shallowEqual);
 
   const [params, setParams] = useState({});
   const titleName = '기체 관리';

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -14,13 +14,10 @@ import {
 } from '@src/_redux/features/basis/group/groupThunk';
 import { clientSelectAprvGroup } from '@src/_redux/features/basis/group/groupSlice';
 
-export const BasisGroupApprovalContainer = props => {
+export const BasisGroupApprovalContainer = ({ user }) => {
   const dispatch = useDispatch();
   const titleName = '승인관리';
 
-  // 유저 정보
-  const { user } = useSelector(state => state.authState);
-
   // 검색 조건 초기값
   const [params, setParams] = useState({
     cstmrSno: user?.cstmrSno,

src/containers/basis/group/BasisGroupContainer.js

@@ -12,9 +12,9 @@ import {
   leaveGroup
 } from '@src/_redux/features/basis/group/groupThunk';
 
-export const BasisGroupContainer = props => {
+export const BasisGroupContainer = ({ history, user }) => {
   const dispatch = useDispatch();
-  const history = useHistory();
+
   const titleName = '나의 그룹';
   const [saveParams, setSaveParams] = useState({});
 
@@ -23,9 +23,6 @@ export const BasisGroupContainer = props => {
     state => state.groupState
   );
 
-  // 유저 정보
-  const { user } = useSelector(state => state.authState);
-
   //모달 관련 설정
   const [modal, setModal] = useState({
     isOpen: false,

src/containers/basis/group/BasisGroupDetailContainer.js

@@ -12,7 +12,7 @@ import {
   updateGroup
 } from '@src/_redux/features/basis/group/groupThunk';
 
-export const BasisGroupDetailContainer = () => {
+export const BasisGroupDetailContainer = ({ user }) => {
   const dispatch = useDispatch();
 
   const { id } = useParams();
@@ -21,9 +21,6 @@ export const BasisGroupDetailContainer = () => {
   // 그룹 상세정보, 그룹 랜덤 ID
   const { groupDetail, newGroupId } = useSelector(state => state.groupState);
 
-  // 유저 정보
-  const { user } = useSelector(state => state.authState);
-
   // 그룹 초기 데이터
   const [groupData, setGroupData] = useState({
     type: 'create',

src/containers/basis/group/BasisGroupDetailJoinContainer.js

@@ -10,13 +10,10 @@ import {
   joinGroup
 } from '@src/_redux/features/basis/group/groupThunk';
 
-export const BasisGroupDetailJoinContainer = props => {
+export const BasisGroupDetailJoinContainer = ({ user }) => {
   const dispatch = useDispatch();
   const titleName = '그룹가입';
 
-  // 유저 정보
-  const { user } = useSelector(state => state.authState);
-
   // 그룹가입목록, 그룹가입목록 수
   const { joinList, joinListCount } = useSelector(state => state.groupState);
 

src/containers/basis/group/BasisGroupUsersContainer.js

@@ -15,7 +15,7 @@ import {
 } from '@src/_redux/features/basis/group/groupThunk';
 import { clientSelectUserGroup } from '@src/_redux/features/basis/group/groupSlice';
 
-export const BasisGroupUsersContainer = props => {
+export const BasisGroupUsersContainer = ({ user }) => {
   const dispatch = useDispatch();
   const titleName = '사용자 관리';
 
@@ -30,9 +30,6 @@ export const BasisGroupUsersContainer = props => {
     count
   } = useSelector(state => state.groupState);
 
-  // 유저 정보
-  const { user } = useSelector(state => state.authState);
-
   /**
    * 검색 조건 초기값
    * cstmrSno: 유저고유번호

src/containers/main/dash/MainDashContainer.js

@@ -10,7 +10,7 @@ import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay
 import * as Actions from '../../../_redux/features/dashboard/dashboardThunk';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 
-export const MainDashContainer = () => {
+export const MainDashContainer = ({ history, user }) => {
   const dispatch = useDispatch();
   /*
     stcsDayList : 일 별 비행횟수
@@ -23,11 +23,9 @@ export const MainDashContainer = () => {
   const { stcsDayList, stcsAreaList } = useSelector(
     state => state.dashboardState
   );
-  const { user } = useSelector(state => state.authState);
 
   const [dayStartDate, setDayStartDate] = useState(new Date());
   const [areaStartDate, setAreaStartDate] = useState(new Date());
-  const history = useHistory();
 
   useEffect(() => {
     // 일일 비행계획 현황, 일일 비행건수 현황, 일일 비정상상황 현황 Promise.all 처리

src/modules/account/auth/service/jwtTokenUtil.ts

@@ -25,7 +25,7 @@ export const getAccessToken = async () => {
   let token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
 
   if (!token || token == undefined || token == 'undefined') {
-    store.dispatch(Actions.setLogout.request());
+    // store.dispatch(Actions.setLogout.request());
     return '';
   }
 

src/modules/utils/customAxiosUtil.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { HOST } from '../../configs/constants';
 import { getAccessToken } from '../account/auth/service/jwtTokenUtil';
 import { store } from './../../redux/storeConfig/store';
@@ -37,22 +37,10 @@ clientInstance.interceptors.response.use(
     store.dispatch(clientLoaded());
     return response.data;
   },
-  error => {
-    // const message = error?.message || '';
-
-    // const name = error?.name || '';
-
-    // if (error?.response?.status == 401) {
-    //  let refreshToken = await refreshTokenAPI(userData.cstmrSno,getRefreshToken());
-    // store.dispatch(
-    //   Actions.refresh.request({
-    //     cstmrSno: userData.cstmrSno,
-    //     refreshToken: getRefreshToken()
-    //   })
-    // );
-    //store.dispatch(Actions.setLogout.request());
-    // } else {
-    // }
+  (error: AxiosError) => {
+    const { message } = error;
+    const { method, url } = error.config as AxiosRequestConfig;
+    const { status, statusText } = error.response as AxiosResponse;
 
     return Promise.reject(error);
   }

src/router/hoc/authenticationCheck.tsx

@@ -1,51 +1,51 @@
 import { ReactNode, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector, useDispatch } from '@store/storeConfig/store';
-import * as Actions from '../../modules/account/auth/actions';
-import clientInstance from '../../modules/utils/customAxiosUtil';
-import { checkCookie } from '@src/_redux/features/account/auth/authThunk';
-import { MessageModal } from '@src/components/message/MessageModal';
-import { MessageErrorModal } from '@src/components/message/MessageErrorModal';
-import { MessageInfoModal } from '@src/components/message/MessageInfoModal';
+import { checkToken } from '@src/_redux/features/account/auth/authThunk';
+import { ICheckAuthencationRs } from '@src/_redux/features/account/auth/authState';
 
 interface IOption {
   authRoute?: boolean;
 }
 
+interface IProps extends RouteComponentProps {
+  user?: ICheckAuthencationRs;
+}
+
 export default function (SpecificComponent: ReactNode, option: IOption) {
   function AuthenticationCheck(props: RouteComponentProps) {
-    const user = useSelector(state => state.authState.user);
     const dispatch = useDispatch();
+    const { user } = useSelector(state => state.authState);
 
     useEffect(() => {
       const tokenVerification = async () => {
         try {
+          // 로그인 해야만 접근 가능한 페이지인지 체크하는 옵션
           const { authRoute } = option;
-          if (authRoute) {
-            const {
-              data: { result }
-            } = await clientInstance.get('/api/acnt/jwt/valid/token');
-            if (!result) {
-              props.history.replace('/account/login');
+          const {
+            payload: { result }
+          } = await dispatch(checkToken() as any);
+          console.log(result);
+          console.log(authRoute);
+          if (!result) {
+            if (authRoute) props.history.push('/account/login');
+          } else {
+            if (!authRoute) {
+              props.history.replace('/main/dashboard');
             }
-            dispatch(checkCookie());
-            // dispatch(Actions.checkAuthencation.request());
           }
         } catch (error) {
-          props.history.replace('/account/login');
+          // props.history.replace('/account/login');
         }
       };
 
       tokenVerification();
     }, []);
-    const Component: (props: RouteComponentProps) => JSX.Element =
-      SpecificComponent as (props: RouteComponentProps) => JSX.Element;
+    const Component: (props: IProps) => JSX.Element = SpecificComponent as (
+      props: IProps
+    ) => JSX.Element;
 
-    return (
-      <>
-        <Component {...props} />
-      </>
-    );
+    return <Component {...props} user={user} />;
   }
   return AuthenticationCheck;
 }

src/views/account/AccountLoginView.js

@@ -1,6 +1,6 @@
 import { AccountLogin } from '../../components/account/login/AccountLogin';
 const AccountLoginView = props => {
-  return <AccountLogin props={props} />;
+  return <AccountLogin {...props} />;
 };
 
 export default AccountLoginView;

src/views/basis/dron/BasisDron.js

@@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { BasisDronContainer } from '../../../containers/basis/dron/BasisDronContainer';
 
-const BasisDron = () => {
+const BasisDron = props => {
   return (
     <div>
-      <BasisDronContainer />
+      <BasisDronContainer {...props} />
       {/* <GroupCategroySearch /> */}
       {/* <GroupCategroyList /> */}
     </div>

src/views/basis/group/BasisGroup.js

@@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { BasisGroupContainer } from '../../../containers/basis/group/BasisGroupContainer';
 
-const BasisGroup = () => {
+const BasisGroup = props => {
   return (
     <div>
-      <BasisGroupContainer />
+      <BasisGroupContainer {...props} />
     </div>
   );
 };

src/views/basis/group/BasisGroupAproval.js

@@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { BasisGroupApprovalContainer } from '../../../containers/basis/group/BasisGroupApprovalContainer';
 
-const BasisGroupAproval = () => {
+const BasisGroupAproval = props => {
   return (
     <div>
-      <BasisGroupApprovalContainer />
+      <BasisGroupApprovalContainer {...props} />
     </div>
   );
 };

src/views/basis/group/BasisGroupDetail.js

@@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { BasisGroupDetailContainer } from '../../../containers/basis/group/BasisGroupDetailContainer';
 
-const BasisGroupDetail = () => {
+const BasisGroupDetail = props => {
   return (
     <div>
-      <BasisGroupDetailContainer />
+      <BasisGroupDetailContainer {...props} />
     </div>
   );
 };

src/views/basis/group/BasisGroupDetailJoin.js

@@ -4,10 +4,10 @@ import '../../../assets/css/custom.css';
 
 import { BasisGroupDetailJoinContainer } from '../../../containers/basis/group/BasisGroupDetailJoinContainer';
 
-const BasisGroupDetailJoin = () => {
+const BasisGroupDetailJoin = props => {
   return (
     <div>
-      <BasisGroupDetailJoinContainer />
+      <BasisGroupDetailJoinContainer {...props} />
     </div>
   );
 };

src/views/basis/group/BasisGroupUsers.js

@@ -4,10 +4,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { BasisGroupUsersContainer } from '../../../containers/basis/group/BasisGroupUsersContainer';
 
-const BasisGroupUsers = () => {
+const BasisGroupUsers = props => {
   return (
     <div>
-      <BasisGroupUsersContainer />
+      <BasisGroupUsersContainer {...props} />
     </div>
   );
 };

src/views/main/MainDashboard.js

@@ -10,7 +10,7 @@ const MainDashboard = props => {
       {/* <Helmet>
         <title>메인보드</title>
       </Helmet> */}
-      <MainDashContainer />
+      <MainDashContainer {...props} />
     </>
   );
 };