feat: 테넌트 그룹 관리 UI 및 상세 멤버십 관리 기능 구현 #239

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

@@ -18,6 +18,7 @@ import {
   approveTenant,
   deleteTenant,
   fetchTenant,
+  fetchTenantGroups,
   updateTenant,
 } from "../../../lib/adminApi";
 
@@ -35,11 +36,17 @@ export function TenantProfilePage() {
     queryFn: () => fetchTenant(tenantId),
   });
 
+  const groupsQuery = useQuery({
+    queryKey: ["tenant-groups", { limit: 100 }],
+    queryFn: () => fetchTenantGroups(100, 0),
+  });
+
   const [name, setName] = useState("");
   const [slug, setSlug] = useState("");
   const [description, setDescription] = useState("");
   const [status, setStatus] = useState("active");
   const [domains, setDomains] = useState("");
+  const [tenantGroupId, setTenantGroupId] = useState("");
 
   useEffect(() => {
     if (tenantQuery.data) {
@@ -48,6 +55,7 @@ export function TenantProfilePage() {
       setDescription(tenantQuery.data.description ?? "");
       setStatus(tenantQuery.data.status);
       setDomains(tenantQuery.data.domains?.join(", ") ?? "");
+      setTenantGroupId(tenantQuery.data.tenantGroupId ?? "");
     }
   }, [tenantQuery.data]);
 
@@ -58,6 +66,7 @@ export function TenantProfilePage() {
         slug,
         description: description || undefined,
         status,
+        tenantGroupId: tenantGroupId || undefined,
         domains: domains
           .split(",")
           .map((d) => d.trim())
@@ -136,6 +145,24 @@ export function TenantProfilePage() {
               onChange={(e) => setDescription(e.target.value)}
             />
           </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Tenant Group</Label>
+            <select
+              value={tenantGroupId}
+              onChange={(e) => setTenantGroupId(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="">그룹 없음</option>
+              {groupsQuery.data?.items.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.name} ({group.slug})
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-muted-foreground">
+              테넌트가 속할 그룹을 지정합니다. 그룹 관리자는 소속 테넌트에 대한 접근 권한을 가집니다.
+            </p>
+          </div>
           <div className="space-y-2">
             <Label className="text-sm font-semibold">
               Allowed Domains (Comma separated)