IdP 연동 관리 UI 및 라우팅 추가

adminfront/src/features/tenants/routes/TenantDetailPage.tsx

@@ -0,0 +1,71 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft } from "lucide-react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { fetchTenant } from "../../../lib/adminApi";
+
+function TenantDetailPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const location = useLocation();
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId!),
+    enabled: !!tenantId,
+  });
+
+  const isFederationTab = location.pathname.includes("/federation");
+
+  return (
+    <div className="space-y-8">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+            <Link to="/tenants" className="inline-flex items-center gap-2">
+              <ArrowLeft size={14} />
+              Tenants
+            </Link>
+            <span>/</span>
+            <span className="text-foreground">Detail</span>
+          </div>
+          <h2 className="text-3xl font-semibold">
+            {tenantQuery.data?.name ?? "Loading Tenant..."}
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            Edit tenant information or manage federation settings.
+          </p>
+        </div>
+        <Badge variant="muted">Admin only</Badge>
+      </header>
+
+      {/* Tabs */}
+      <div className="flex border-b">
+        <Link
+          to={`/tenants/${tenantId}`}
+          className={`px-4 py-2 text-sm font-medium ${
+            !isFederationTab
+              ? "border-b-2 border-blue-500 text-blue-600"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          Profile
+        </Link>
+        <Link
+          to={`/tenants/${tenantId}/federation`}
+          className={`px-4 py-2 text-sm font-medium ${
+            isFederationTab
+              ? "border-b-2 border-blue-500 text-blue-600"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          Federation
+        </Link>
+      </div>
+
+      {/* Outlet for nested routes */}
+      <Outlet />
+    </div>
+  );
+}
+
+export default TenantDetailPage;