feat: initialize new React application structure with TypeScript, ESLint, and Prettier configurations, while removing legacy files and adding new components and pages for enhanced functionality

src/router/ProtectedRoute.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '@/stores';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+
+export function ProtectedRoute({ children }: { children: ReactElement }) {
+  const location = useLocation();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const managementKey = useAuthStore((state) => state.managementKey);
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+  const [checking, setChecking] = useState(false);
+
+  useEffect(() => {
+    const tryRestore = async () => {
+      if (!isAuthenticated && managementKey && apiBase) {
+        setChecking(true);
+        try {
+          await checkAuth();
+        } finally {
+          setChecking(false);
+        }
+      }
+    };
+    tryRestore();
+  }, [apiBase, isAuthenticated, managementKey, checkAuth]);
+
+  if (checking) {
+    return (
+      <div className="main-content">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  return children;
+}