Merge pull request #137 from imaginer-dev/126-로그인-세션-확인-및-메인-페이지로-리디렉션

feat: 권한 없을시 리디렉션 시키는 프로텍터 추가

Author: jane1107

src/apis/sessionApis.ts

@@ -0,0 +1,11 @@
+import supabase from '@/supabase';
+
+export const getSession = async () => {
+  const { data, error } = await supabase.auth.getSession();
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};

src/main.tsx

@@ -6,13 +6,18 @@ import App from './App.tsx';
 import TextInputForm from './pages/InputFormTest.tsx';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { JoinPage, LoginPage, ResetPwPage, NotFound, Policy } from './pages/index.ts';
+import ProtectedRoute from './providers/ProtectedRoute.tsx';
 
 import UserInvite from './components/common/UserInvite.tsx';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <App />,
+    element: (
+      <ProtectedRoute>
+        <App />
+      </ProtectedRoute>
+    ),
   },
   {
     path: '/login',

src/providers/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+import { Loading } from '@/pages';
+import { useGetSession } from '@/react-queries/useGetSession';
+import { FC, ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface Props {
+  children: ReactNode;
+}
+
+const ProtectedRoute: FC<Props> = ({ children }) => {
+  const { data, isError, error, isLoading } = useGetSession();
+  const navigate = useNavigate();
+
+  if (isError) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return <Loading display="spinner" size="lg" color="primary" />;
+  }
+
+  if (!data?.session) {
+    navigate('/login');
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

src/react-queries/queryKeys.ts

@@ -1,3 +1,7 @@
 import { createQueryKeyStore } from '@lukemorales/query-key-factory';
 
-export const queries = createQueryKeyStore({});
+export const queries = createQueryKeyStore({
+  session: {
+    getSession: null,
+  },
+});

src/react-queries/useGetSession.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { queries } from './queryKeys';
+import { getSession } from '@/apis/sessionApis';
+
+export const useGetSession = () =>
+  useQuery({
+    queryKey: queries.session.getSession.queryKey,
+    queryFn: getSession,
+  });