Initial Commit

2_frontend/src/shared/components/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react"
+import { Navigate, Outlet, useLocation } from "react-router-dom"
+import { useMe } from "@/features/auth/hooks/useMe"
+import { useAuthStore } from "@/features/auth/store/authStore"
+import { PATHS } from "@/config/routes"
+
+/**
+ * 저장된 user를 서버에서 확인한 뒤 보호 화면을 연다.
+ * 인증이 없으면 `/login?from=<원래 경로>` 로 redirect.
+ * `from`은 LoginForm에서 검증 후 사용 (외부 도메인·protocol-relative 차단).
+ */
+export default function ProtectedRoute() {
+  const user = useAuthStore((s) => s.user)
+  const clearUser = useAuthStore((s) => s.clearUser)
+  const me = useMe(user !== null)
+  const location = useLocation()
+
+  useEffect(() => {
+    if (me.isError) clearUser()
+  }, [clearUser, me.isError])
+
+  if (!user || me.isError) {
+    const from = `${location.pathname}${location.search}${location.hash}`
+    const query = from && from !== "/" ? `?from=${encodeURIComponent(from)}` : ""
+    return <Navigate to={`${PATHS.LOGIN}${query}`} replace />
+  }
+  if (me.isLoading) {
+    return <div className="text-muted-foreground p-6">로그인 확인 중...</div>
+  }
+  return <Outlet />
+}