SSOT 전환

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

@@ -0,0 +1,91 @@
+import { useQuery } from "@tanstack/react-query";
+import { User, Mail, Phone, ShieldCheck } from "lucide-react";
+import { useParams } from "react-router-dom";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Badge } from "../../../components/ui/badge";
+import { fetchUsers, fetchTenant } from "../../../lib/adminApi";
+
+function TenantUsersPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+
+  // 테넌트의 슬러그(companyCode)를 먼저 가져옴
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId!),
+    enabled: !!tenantId,
+  });
+
+  const companyCode = tenantQuery.data?.slug;
+
+  // 해당 슬러그로 사용자 검색
+  const usersQuery = useQuery({
+    queryKey: ["users", { companyCode }],
+    queryFn: () => fetchUsers(100, 0, companyCode),
+    enabled: !!companyCode,
+  });
+
+  const users = usersQuery.data?.items ?? [];
+
+  return (
+    <Card className="mt-6 bg-[var(--color-panel)]">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <User size={18} className="text-primary" />
+          Tenant Members ({users.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>NAME</TableHead>
+              <TableHead>EMAIL</TableHead>
+              <TableHead>ROLE</TableHead>
+              <TableHead>STATUS</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
+                  소속된 사용자가 없습니다.
+                </TableCell>
+              </TableRow>
+            )}
+            {users.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-semibold">{user.name}</TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-1 text-xs">
+                    <Mail size={12} className="text-muted-foreground" />
+                    {user.email}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline" className="capitalize">
+                    {user.role.replace("_", " ")}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <Badge variant={user.status === "active" ? "default" : "muted"}>
+                    {user.status}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default TenantUsersPage;