feat: 페이지 별 로그인 검증을 위한 PrivateRoute 컴포넌트 구현

src/apis/authAxois.ts

@@ -13,6 +13,7 @@ export const checkAndRefreshToken = async () => {
   const refreshToken = LocalStorage.getItem("refresh");
 
   if (!accessToken || !refreshToken) {
+    alert("로그인 후 이용이 가능합니다!");
     return null;
   }
 

src/utils/PrivateRoute.tsx

@@ -0,0 +1,28 @@
+import { AuthVerify } from "@apis/authAxois";
+import { useEffect, useState } from "react";
+import { Navigate } from "react-router-dom";
+
+interface PrivateRouteProps {
+  element: JSX.Element;
+  [key: string]: any;
+}
+
+const PrivateRoute = ({ element }: PrivateRouteProps) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const result = await AuthVerify();
+      setIsAuthenticated(result);
+    };
+    checkAuth();
+  }, []);
+
+  if (isAuthenticated === null) {
+    return;
+  }
+
+  return isAuthenticated ? element : <Navigate to="/login" />;
+};
+
+export default PrivateRoute;