[Feat] private, public route 설정

packages/frontend/src/App.tsx

@@ -1,10 +1,7 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router';
 import { useEffect } from 'react';
 
-const queryClient = new QueryClient();
-
 function App() {
   useEffect(() => {
     const handleUnload = () => {
@@ -21,9 +18,7 @@ function App() {
 
   return (
     <>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <RouterProvider router={router} />
     </>
   );
 }

packages/frontend/src/components/PrivateRoute.tsx

@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router-dom';
+import { useAuthStore } from '@/store/authStore';
+
+interface IPrivateRouteProps {
+  children: React.ReactNode;
+}
+
+export default function PrivateRoute({ children }: IPrivateRouteProps) {
+  const { userId } = useAuthStore();
+
+  if (!userId) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+}

packages/frontend/src/components/PublicRoute.tsx

@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router-dom';
+import { useAuthStore } from '@/store/authStore';
+
+interface IPublicRouteProps {
+  children: React.ReactNode;
+}
+
+export default function PublicRoute({ children }: IPublicRouteProps) {
+  const { userId } = useAuthStore();
+
+  if (userId) {
+    return <Navigate to="/lobby" replace />;
+  }
+
+  return <>{children}</>;
+}

packages/frontend/src/pages/gamePage/index.tsx

@@ -2,17 +2,9 @@ import { useState } from 'react';
 import BackgroundImage from '@/components/layout/BackgroundImage';
 import LeftGameSection from '@/components/gamePage/leftSection/LeftGameSection';
 import RightGameSection from '@/components/gamePage/rightSection/RightGameSection';
-import Header from '@/components/layout/Header';
 import GameManual from '@/components/gamePage/GameManual';
-import { useSocketStore } from '@/store/socketStore';
-import { useRoomStore } from '@/store/roomStore';
 
 export default function GamePage() {
-  const { socket } = useSocketStore();
-  console.log('gamePage', socket?.connected);
-  const { allUsers } = useRoomStore();
-  console.log('방 내에 모든 allUsers 목록', allUsers);
-
   const [isGameManualVisible, setIsGameManualVisible] = useState(true);
 
   const handleCloseManual = () => {

packages/frontend/src/pages/landingPage/index.tsx

@@ -1,11 +1,8 @@
 import GuestLoginButton from '@/components/landingPage/GuestLoginButton';
 import BackgroundImage from '@/components/layout/BackgroundImage';
 import MainLogo from '@/assets/images/MainLogo.svg?react';
-import { useSocketStore } from '@/store/socketStore';
 
 export default function LandingPage() {
-  const { socket } = useSocketStore();
-  console.log('landingPage', socket?.connected);
   return (
     <>
       <BackgroundImage gradientClass="bg-gradient-to-t from-black/90" />

packages/frontend/src/pages/lobbyPage/index.tsx

@@ -24,10 +24,8 @@
       setChatHistory([]);
       setRoomData(null, false, false);
     }
   }, []);
 
-  console.log('lobbyPage', socket?.connected);
-
   return (
     <>
       <BackgroundImage gradientClass="bg-gradient-to-t from-black/90" />

packages/frontend/src/routes/router.tsx

@@ -3,6 +3,8 @@ import Layout from '@/components/layout/Layout';
 import LandingPage from '@/pages/landingPage/index';
 import LobbyPage from '@/pages/lobbyPage/index';
 import GamePage from '@/pages/gamePage/index';
+import PublicRoute from '@/components/PublicRoute';
+import PrivateRoute from '@/components/PrivateRoute';
 
 export const router = createBrowserRouter([
   {
@@ -11,15 +13,27 @@ export const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <LandingPage />,
+        element: (
+          <PublicRoute>
+            <LandingPage />
+          </PublicRoute>
+        ),
       },
       {
         path: 'lobby',
-        element: <LobbyPage />,
+        element: (
+          <PrivateRoute>
+            <LobbyPage />
+          </PrivateRoute>
+        ),
       },
       {
         path: 'game/:gsid',
-        element: <GamePage />,
+        element: (
+          <PrivateRoute>
+            <GamePage />
+          </PrivateRoute>
+        ),
       },
     ],
   },