[FE] 로그인하지 않은 상태에서 페이지에 접근할 때 처리(#551)

frontend/src/components/common/loading/Loading.style.ts

@@ -19,8 +19,8 @@ export const LoadingContainer = styled.div`
 
   svg {
     position: absolute;
-    left: 50%;
     top: 50%;
+    left: 50%;
     transform: translate(-50%, -50%);
   }
 
@@ -36,6 +36,7 @@ export const BackDrop = styled.div`
 
   width: 100vw;
   height: 100vh;
+
   opacity: 0.4;
   background-color: ${({ theme }) => theme.COLOR.black};
 `;

frontend/src/components/routes/NotFoundRoute.tsx

@@ -0,0 +1,18 @@
+import * as S from "./PrivateRoute.style";
+import { useNavigate } from "react-router-dom";
+import Button from "@/components/common/button/Button";
+import { errorCharacter } from "@/assets";
+
+const NotFoundRoute = () => {
+  const navigate = useNavigate();
+
+  return (
+    <S.PrivateRouteContainer>
+      <img src={errorCharacter} alt="로그인 후 이용해주세요" />
+      <p>해당 페이지를 찾을 수 없습니다.</p>
+      <Button onClick={() => navigate("/")}>홈 화면으로 가기</Button>
+    </S.PrivateRouteContainer>
+  );
+};
+
+export default NotFoundRoute;

frontend/src/components/routes/PrivateRoute.style.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const PrivateRouteContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 20%;
+
+  img {
+    width: 50%;
+    max-width: 250px;
+  }
+
+  p {
+    font: ${({ theme }) => theme.TEXT.medium_bold};
+  }
+`;

frontend/src/components/routes/PrivateRoute.tsx

@@ -0,0 +1,23 @@
+import Button from "../common/button/Button";
+import { Outlet, useNavigate } from "react-router-dom";
+import * as S from "@/components/routes/PrivateRoute.style";
+import { errorCharacter } from "@/assets";
+
+const PrivateRoute = () => {
+  const navigate = useNavigate();
+  const isLoggedIn = !!localStorage.getItem("accessToken");
+
+  if (isLoggedIn) {
+    return <Outlet />;
+  }
+
+  return (
+    <S.PrivateRouteContainer>
+      <img src={errorCharacter} alt="로그인 후 이용해주세요" />
+      <p>로그인 후 이용 가능한 페이지입니다.</p>
+      <Button onClick={() => navigate("/")}>홈 화면으로 가기</Button>
+    </S.PrivateRouteContainer>
+  );
+};
+
+export default PrivateRoute;

frontend/src/pages/callback/CallbackPage.style.ts

@@ -1,18 +1,18 @@
 import styled, { keyframes } from "styled-components";
-import { theme } from "@/styles/theme";
 
 export const CallbackPageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
   align-items: center;
   justify-content: center;
 
-  height: 100%;
+  margin-top: 20%;
 `;
 
 export const Character = styled.img`
-  width: 300px;
+  width: 50%;
+  max-width: 250px;
 `;
 
 // LoadingBar
@@ -36,12 +36,15 @@ export const LoadingContainer = styled.div`
   width: 200px;
   height: 30px;
 
-  font: ${({ theme }) => theme.TEXT.medium};
-  color: ${({ theme }) => theme.COLOR.grey4};
-
   background-color: ${({ theme }) => theme.COLOR.white};
   border: 2px solid ${({ theme }) => theme.COLOR.primary2};
   border-radius: 25px;
+
+  p {
+    z-index: 999;
+    font: ${({ theme }) => theme.TEXT.medium_bold};
+    color: ${({ theme }) => theme.COLOR.grey4};
+  }
 `;
 
 export const LoadingBar = styled.div`

frontend/src/pages/callback/CallbackPage.tsx

@@ -17,7 +17,7 @@ const CallbackPage = () => {
     }
 
     const timer = setTimeout(() => {
-      navigate("/");
+      navigate("/", { replace: true });
     }, 2000);
 
     return () => clearTimeout(timer);
@@ -27,7 +27,7 @@ const CallbackPage = () => {
     <S.CallbackPageContainer>
       <S.Character src={thinkingCharacter} alt="로그인 중" />
       <S.LoadingContainer>
-        로그인 중 ...
+        <p>로그인 중...</p>
         <S.LoadingBar />
       </S.LoadingContainer>
     </S.CallbackPageContainer>

frontend/src/router.tsx

@@ -1,3 +1,4 @@
+import PrivateRoute from "./components/routes/PrivateRoute";
 import CallbackPage from "./pages/callback/CallbackPage";
 import FeedbackPage from "./pages/feedback/FeedbackPage";
 import ProfilePage from "./pages/profile/ProfilePage";
@@ -6,6 +7,7 @@ import RoomCreatePage from "./pages/roomCreate/RoomCreatePage";
 import { lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 import Layout from "@/components/layout/Layout";
+import NotFoundRoute from "@/components/routes/NotFoundRoute";
 import MainPage from "@/pages/main/MainPage";
 import RoomDetailPage from "@/pages/roomDetail/RoomDetailPage";
 import UserProfile from "@/pages/userProfile/UserProfile";
@@ -28,33 +30,42 @@ const router = sentryCreateBrowserRouter([
         path: `callback`,
         element: <CallbackPage />,
       },
-      {
-        path: `rooms/:id`,
-        element: <RoomDetailPage />,
-      },
-      {
-        path: `rooms/create`,
-        element: <RoomCreatePage />,
-      },
       {
         path: `guide`,
         element: <GuidePage />,
       },
+      {
+        path: `profile/:username`,
+        element: <UserProfile />,
+      },
       // {
       //   path: `ranking`,
       //   element: <RankingPage />,
       // },
       {
-        path: `feedback`,
-        element: <FeedbackPage />,
-      },
-      {
-        path: `profile`,
-        element: <ProfilePage />,
+        element: <PrivateRoute />,
+        children: [
+          {
+            path: `rooms/:id`,
+            element: <RoomDetailPage />,
+          },
+          {
+            path: `rooms/create`,
+            element: <RoomCreatePage />,
+          },
+          {
+            path: `feedback`,
+            element: <FeedbackPage />,
+          },
+          {
+            path: `profile`,
+            element: <ProfilePage />,
+          },
+        ],
       },
       {
-        path: `profile/:username`,
-        element: <UserProfile />,
+        path: "*",
+        element: <NotFoundRoute />,
       },
     ],
   },