refactor: 로그인 상태 확인 전 페이지 이동 문제 수정

src/App.tsx

@@ -24,7 +24,7 @@ import BalanceGamePage from './pages/BalanceGamePage/BalanceGamePage';
 import BalanceGameMobilePage from './pages/mobile/BalanceGameMobilePage/BalanceGameMobilePage';
 import BalanceGameCreationPage from './pages/BalanceGameCreationPage/BalanceGameCreationPage';
 import { useNewSelector } from './store';
-import { selectAccessToken } from './store/auth';
+import { selectAccessToken, selectIsRefreshing } from './store/auth';
 import useIsMobile from './hooks/common/useIsMobile';
 // import NotAuthRoutes from './components/Routes/NotAuthRoutes';
 // import { useMemberQuery } from './hooks/api/member/useMemberQuery';
@@ -50,6 +50,7 @@ const App: React.FC = () => {
 
   const isMobile = useIsMobile();
   const isLoggedIn = !!useNewSelector(selectAccessToken);
+  const isTokenRefreshing = useNewSelector(selectIsRefreshing);
 
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search);
@@ -61,6 +62,8 @@ const App: React.FC = () => {
   }, [location.search, navigate]);
   useTokenRefresh();
 
+  if (isTokenRefreshing) return null;
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ko">
       <Routes>

src/components/Routes/ProtectedRoutes.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import { PATH } from '@/constants/path';
-import { useTokenRefresh } from '@/hooks/common/useTokenRefresh';
 import { Navigate, Outlet } from 'react-router-dom';
 
 type Props = {
   isLoggedIn: boolean;
 };
 
 const ProtectedRoutes = ({ isLoggedIn }: Props) => {
-  useTokenRefresh();
-
   return isLoggedIn ? <Outlet /> : <Navigate to={PATH.LOGIN} />;
 };
 

src/hooks/common/useTokenRefresh.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import { useQueryClient } from '@tanstack/react-query';
 import { getRefreshToken } from '@/api/interceptor';
 import { useNewDispatch, useNewSelector } from '@/store';
 import { selectAccessToken, tokenActions } from '@/store/auth';
@@ -9,27 +8,27 @@ import { useNavigate } from 'react-router-dom';
 export const useTokenRefresh = () => {
   const dispatch = useNewDispatch();
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const accessToken = useNewSelector(selectAccessToken);
 
   useEffect(() => {
     const tokenRefresh = async () => {
-      if (accessToken) return;
+      if (accessToken) {
+        dispatch(tokenActions.setRefreshing(false));
+        return;
+      }
 
       try {
         const newAccessToken = await getRefreshToken();
         dispatch(tokenActions.setToken(newAccessToken));
-
-        await queryClient.invalidateQueries({
-          queryKey: ['members'],
-        });
       } catch (error) {
         dispatch(tokenActions.deleteToken());
+      } finally {
+        dispatch(tokenActions.setRefreshing(false));
       }
     };
     tokenRefresh().catch((error) => {
       console.error('토큰 에러: ', error);
     });
-  }, [accessToken, dispatch, navigate, queryClient]);
+  }, [accessToken, dispatch, navigate]);
 };

src/store/auth.ts

@@ -3,10 +3,12 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
 interface TokenState {
   accessToken: string | undefined;
+  isRefreshing: boolean;
 }
 
 const initialState: TokenState = {
   accessToken: undefined,
+  isRefreshing: true,
 };
 
 export const tokenSlice = createSlice({
@@ -15,18 +17,26 @@ export const tokenSlice = createSlice({
   reducers: {
     setToken: (state, action: PayloadAction<string>) => {
       state.accessToken = action.payload;
+      state.isRefreshing = false;
     },
     deleteToken: (state) => {
       state.accessToken = undefined;
+      state.isRefreshing = false;
+    },
+    setRefreshing: (state, action: PayloadAction<boolean>) => {
+      state.isRefreshing = action.payload;
     },
   },
 });
 
-export const { setToken, deleteToken } = tokenSlice.actions;
+export const { setToken, deleteToken, setRefreshing } = tokenSlice.actions;
 
 export const tokenActions = tokenSlice.actions;
 
 export const selectAccessToken = (state: { token: TokenState }) =>
   state.token.accessToken;
 
+export const selectIsRefreshing = (state: { token: TokenState }) =>
+  state.token.isRefreshing;
+
 export default tokenSlice.reducer;