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';
@@ -49,7 +49,8 @@ const App: React.FC = () => {
   const navigate = useNavigate();
 
   const isMobile = useIsMobile();
-  const isLoggedIn = !!useNewSelector(selectAccessToken);
+  const accessToken = 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>
@@ -93,7 +96,7 @@ const App: React.FC = () => {
           <Route path={PATH.SEARCH.GAME} element={<SearchGamePage />} />
         </Route>
 
-        <Route element={<ProtectedRoutes isLoggedIn={isLoggedIn} />}>
+        <Route element={<ProtectedRoutes token={accessToken} />}>
           <Route path={PATH.MYPAGE} element={<LayoutNoFooter />}>
             <Route index element={<MyPage />} />
           </Route>

src/components/Routes/ProtectedRoutes.tsx

@@ -1,16 +1,13 @@
 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;
+  token: string | undefined;
 };
 
-const ProtectedRoutes = ({ isLoggedIn }: Props) => {
-  useTokenRefresh();
-
-  return isLoggedIn ? <Outlet /> : <Navigate to={PATH.LOGIN} />;
+const ProtectedRoutes = ({ token }: Props) => {
+  return token ? <Outlet /> : <Navigate to={PATH.LOGIN} />;
 };
 
 export default ProtectedRoutes;

src/hooks/common/useTokenRefresh.ts

@@ -1,8 +1,8 @@
 /* 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';
+import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -15,7 +15,10 @@ export const useTokenRefresh = () => {
 
   useEffect(() => {
     const tokenRefresh = async () => {
-      if (accessToken) return;
+      if (accessToken) {
+        dispatch(tokenActions.setRefreshing(false));
+        return;
+      }
 
       try {
         const newAccessToken = await getRefreshToken();
@@ -26,6 +29,8 @@ export const useTokenRefresh = () => {
         });
       } catch (error) {
         dispatch(tokenActions.deleteToken());
+      } finally {
+        dispatch(tokenActions.setRefreshing(false));
       }
     };
     tokenRefresh().catch((error) => {

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;