init: SR System — Helpdesk & ITAM Portal

src/components/layout/AuthGuard.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { ShieldAlert } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import { getCookie } from '@/lib/cookie';
+
+const publicPaths = ['/login'];
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { isAuthenticated, fetchMe, tryRefresh, accessToken } = useAuthStore();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (publicPaths.includes(pathname)) {
+      setLoading(false);
+      return;
+    }
+
+    const init = async () => {
+      const token = accessToken || localStorage.getItem('accessToken') || getCookie('accessToken');
+
+      if (!token) {
+        const hasRefresh = localStorage.getItem('refreshToken');
+        if (hasRefresh) {
+          const renewed = await tryRefresh();
+          if (renewed) {
+            await fetchMe().catch(() => {
+              router.replace('/login');
+              return;
+            });
+            setLoading(false);
+            return;
+          }
+        }
+        router.replace('/login');
+        return;
+      }
+
+      if (!isAuthenticated) {
+        await fetchMe().catch(() => {
+          router.replace('/login');
+          return;
+        });
+      }
+      setLoading(false);
+    };
+
+    init();
+  }, [pathname]);
+
+  if (publicPaths.includes(pathname)) return <>{children}</>;
+
+  if (loading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-canvas">
+        <div className="text-center">
+          <ShieldAlert className="w-10 h-10 text-primary mx-auto mb-3 animate-pulse" />
+          <p className="text-text-muted text-sm">인증 확인 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}