logout 버튼 클릭시 현재 페이지 리랜더링 되는 현상 수정

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

@@ -30,13 +30,12 @@ const UserDropdown = () => {
   const history = useHistory();
   const { user } = useSelector(state => state.authState);
 
-  const handelrLogout = async () => {
+  const handelrLogout = async e => {
+    e.preventDefault();
     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');
+      history.replace('/account/login');
     }
   };
 
@@ -73,30 +72,38 @@ const UserDropdown = () => {
   };
 
   return (
-    <UncontrolledDropdown tag='li' className='dropdown-user nav-item'>
-      <DropdownToggle
-        href='/'
-        tag='a'
-        className='nav-link dropdown-user-link'
-        onClick={e => e.preventDefault()}
-      >
-        <div className='user-nav d-sm-flex d-none'>
-          <span className='user-name font-weight-bold'>{user?.memberName}</span>
-          <span className='user-status'>{user?.authId}</span>
-        </div>
-        <Avatar img={userAvatar} imgHeight='40' imgWidth='40' status='online' />
-      </DropdownToggle>
-      <DropdownMenu right>
-        <DropdownItem
-          onClick={profileInfo}
-          tag={Link}
-          // to='/login'
-          to='#'
+    <>
+      <UncontrolledDropdown tag='li' className='dropdown-user nav-item'>
+        <DropdownToggle
+          href='/'
+          tag='a'
+          className='nav-link dropdown-user-link'
+          onClick={e => e.preventDefault()}
         >
-          <User size={14} className='mr-75' />
-          <span className='align-middle'>Profile</span>
-        </DropdownItem>
-        {/* <DropdownItem tag={Link} to='#' onClick={e => e.preventDefault()}>
+          <div className='user-nav d-sm-flex d-none'>
+            <span className='user-name font-weight-bold'>
+              {user?.memberName}
+            </span>
+            <span className='user-status'>{user?.authId}</span>
+          </div>
+          <Avatar
+            img={userAvatar}
+            imgHeight='40'
+            imgWidth='40'
+            status='online'
+          />
+        </DropdownToggle>
+        <DropdownMenu right>
+          <DropdownItem
+            onClick={profileInfo}
+            tag={Link}
+            // to='/login'
+            to='#'
+          >
+            <User size={14} className='mr-75' />
+            <span className='align-middle'>Profile</span>
+          </DropdownItem>
+          {/* <DropdownItem tag={Link} to='#' onClick={e => e.preventDefault()}>
           <Mail size={14} className='mr-75' />
           <span className='align-middle'>Inbox</span>
         </DropdownItem>
@@ -108,17 +115,18 @@ const UserDropdown = () => {
           <MessageSquare size={14} className='mr-75' />
           <span className='align-middle'>Chats</span>
         </DropdownItem> */}
-        <DropdownItem
-          tag={Link}
-          // to='/login'
-          to='#'
-          onClick={handelrLogout}
-        >
-          <Power size={14} className='mr-75' />
-          <span className='align-middle'>Logout</span>
-        </DropdownItem>
-      </DropdownMenu>
-    </UncontrolledDropdown>
+          <DropdownItem
+            tag={Link}
+            // to='/login'
+            to='#'
+            onClick={handelrLogout}
+          >
+            <Power size={14} className='mr-75' />
+            <span className='align-middle'>Logout</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </UncontrolledDropdown>
+    </>
   );
 };
 

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

@@ -95,6 +95,9 @@ export const setLogout = createAsyncThunk(
       const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
 
       if (accessToken) {
+        cookieStorage.removeCookie(COOKIE_ACCESS_TOKEN);
+        cookieStorage.removeCookie(COOKIE_REFRESH_TOKEN);
+
         const decodedToken = decode<IDecodeToken>(accessToken);
         const { data }: { data: string } = await axios.get(
           `api/acnt/jwt/logout/${decodedToken.cstmrSno}`

src/containers/main/dash/MainDashContainer.js

@@ -35,12 +35,10 @@ export const MainDashContainer = ({ history, user }) => {
   }, []);
 
   useEffect(() => {
-    if (user) {
-      handlerDronOperationList(
-        user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
-      );
-    }
-  }, [user]);
+    handlerDronOperationList(
+      user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
+    );
+  }, []);
 
   // 일 별 비행횟수 통계 날짜 리스트 dispatch
   const handlerStcsDaySearch = date => {

src/modules/utils/customAxiosUtil.ts

@@ -37,10 +37,10 @@ clientInstance.interceptors.response.use(
     store.dispatch(clientLoaded());
     return response.data;
   },
-  (error: AxiosError) => {
-    const { message } = error;
-    const { method, url } = error.config as AxiosRequestConfig;
-    const { status, statusText } = error.response as AxiosResponse;
+  async (error: AxiosError) => {
+    const { status } = error.response as AxiosResponse;
+    if (status === 401) {
+    }
 
     return Promise.reject(error);
   }

src/router/hoc/authenticationCheck.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useLayoutEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector, useDispatch } from '@store/storeConfig/store';
 import { checkToken } from '@src/_redux/features/account/auth/authThunk';
@@ -17,7 +17,7 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
     const dispatch = useDispatch();
     const { user } = useSelector(state => state.authState);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       const tokenVerification = async () => {
         try {
           // 로그인 해야만 접근 가능한 페이지인지 체크하는 옵션
@@ -25,10 +25,12 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
           const {
             payload: { result }
           } = await dispatch(checkToken() as any);
-          console.log(result);
-          console.log(authRoute);
+
           if (!result) {
-            if (authRoute) props.history.push('/account/login');
+            if (authRoute) {
+              props.history.replace('/account/login');
+              return;
+            }
           } else {
             if (!authRoute) {
               props.history.replace('/main/dashboard');