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

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

@@ -0,0 +1,171 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { deleteTenant, fetchTenants } from "../../../lib/adminApi";
+
+function TenantListPage() {
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ["tenants", { limit: 50, offset: 0 }],
+    queryFn: () => fetchTenants(50, 0),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (tenantId: string) => deleteTenant(tenantId),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError ? "테넌트 목록 조회에 실패했습니다." : null;
+
+  const items = query.data?.items ?? [];
+
+  const handleDelete = (tenantId: string, tenantName: string) => {
+    if (!window.confirm(`테넌트 "${tenantName}"를 삭제할까요?`)) {
+      return;
+    }
+    deleteMutation.mutate(tenantId);
+  };
+
+  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)]">
+            <span>Tenants</span>
+            <span>/</span>
+            <span className="text-foreground">List</span>
+          </div>
+          <h2 className="text-3xl font-semibold">테넌트 목록</h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            현재 등록된 테넌트를 확인하고 상태를 관리합니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            새로고침
+          </Button>
+          <Button asChild>
+            <Link to="/tenants/new">
+              <Plus size={16} />
+              테넌트 추가
+            </Link>
+          </Button>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle>Tenant registry</CardTitle>
+            <CardDescription>
+              총 {query.data?.total ?? 0}개 테넌트
+            </CardDescription>
+          </div>
+          <Badge variant="muted">Admin only</Badge>
+        </CardHeader>
+        <CardContent>
+          {(errorMsg || fallbackError) && (
+            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg ?? fallbackError}
+            </div>
+          )}
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>NAME</TableHead>
+                <TableHead>SLUG</TableHead>
+                <TableHead>STATUS</TableHead>
+                <TableHead>UPDATED</TableHead>
+                <TableHead className="text-right">ACTIONS</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {query.isLoading && (
+                <TableRow>
+                  <TableCell colSpan={5}>로딩 중...</TableCell>
+                </TableRow>
+              )}
+              {!query.isLoading && items.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    아직 등록된 테넌트가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {items.map((tenant) => (
+                <TableRow key={tenant.id}>
+                  <TableCell className="font-semibold">{tenant.name}</TableCell>
+                  <TableCell>{tenant.slug}</TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={tenant.status === "active" ? "default" : "muted"}
+                    >
+                      {tenant.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {tenant.updatedAt
+                      ? new Date(tenant.updatedAt).toLocaleString("ko-KR")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(`/tenants/${tenant.id}`)}
+                      >
+                        <Pencil size={14} />
+                        편집
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(tenant.id, tenant.name)}
+                        disabled={deleteMutation.isPending}
+                      >
+                        <Trash2 size={14} />
+                        삭제
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantListPage;