Merge pull request #169 from woowacourse-teams/feature/CK-209

[feat/CK-209] 새로고침 시 로그인 페이지로 이동하는 버그를 해결한다.

client/src/App.tsx

@@ -1,5 +1,5 @@
-import { lazy, PropsWithChildren, Suspense, useEffect } from 'react';
-import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import theme from '@styles/theme';
 import GlobalStyle from '@styles/GlobalStyle';
 import { ThemeProvider } from 'styled-components';
@@ -13,15 +13,13 @@ import RoadmapDetailPage from './pages/roadmapDetailPage/RoadmapDetailPage';
 import RoadmapCreatePage from './pages/roadmapCreatePage/RoadmapCreatePage';
 import ToastProvider from '@components/_common/toastProvider/ToastProvider';
 import MyPage from '@pages/myPage/MyPage';
-import UserInfoProvider, {
-  useUserInfoContext,
-} from './components/_providers/UserInfoProvider';
+import UserInfoProvider from './components/_providers/UserInfoProvider';
 import RoadmapSearchResult from './components/roadmapListPage/roadmapSearch/RoadmapSearchResult';
 import MainPage from '@pages/mainPage/MainPage';
-import useToast from '@hooks/_common/useToast';
 import OAuthRedirect from './components/loginPage/OAuthRedirect';
 import AsyncBoundary from './components/_common/errorBoundary/AsyncBoundary';
 import SessionHandler from '@components/_common/sessionHandler/SessionHandler';
+import PrivateRouter from '@components/_common/privateRouter/PrivateRouter';
 
 const GoalRoomDashboardPage = lazy(
   () => import('@pages/goalRoomDashboardPage/GoalRoomDashboardPage')
@@ -31,22 +29,6 @@ const GoalRoomCreatePage = lazy(
   () => import('@pages/goalRoomCreatePage/GoalRoomCreatePage')
 );
 
-const PrivateRouter = (props: PropsWithChildren) => {
-  const { children } = props;
-  const { userInfo } = useUserInfoContext();
-  const { triggerToast } = useToast();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (userInfo.id === null) {
-      navigate('/login');
-      triggerToast({ message: '로그인이 필요한 서비스입니다.' });
-    }
-  }, [userInfo.id, navigate]);
-
-  return <>{children}</>;
-};
-
 const App = () => {
   return (
     <ThemeProvider theme={theme}>

client/src/components/_common/privateRouter/PrivateRouter.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren, useEffect } from 'react';
+import { useUserInfoContext } from '@components/_providers/UserInfoProvider';
+import useToast from '@hooks/_common/useToast';
+import { useNavigate } from 'react-router-dom';
+import { getCookie } from '@utils/_common/cookies';
+
+const PrivateRouter = (props: PropsWithChildren) => {
+  const { children } = props;
+  const { userInfo } = useUserInfoContext();
+  const { triggerToast } = useToast();
+  const navigate = useNavigate();
+  const accessToken = getCookie('access_token');
+
+  useEffect(() => {
+    if (userInfo.id === null && !accessToken) {
+      navigate('/login');
+      triggerToast({ message: '로그인이 필요한 서비스입니다.' });
+    }
+  }, [userInfo.id, navigate]);
+
+  return <>{children}</>;
+};
+
+export default PrivateRouter;