유저 그룹 계층형 보기

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

@@ -1,6 +1,13 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import {
+  CornerDownRight,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Trash2,
+} from "lucide-react";
+import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -19,14 +26,119 @@ import {
   TableHeader,
   TableRow,
 } from "../../../components/ui/table";
-import { deleteTenant, fetchTenants } from "../../../lib/adminApi";
+import {
+  deleteTenant,
+  fetchTenants,
+  type TenantSummary,
+} from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 
-function TenantListPage() {
+type TenantNode = TenantSummary & { children: TenantNode[] };
+
+function buildTenantTree(tenants: TenantSummary[]): TenantNode[] {
+  const tenantMap = new Map<string, TenantNode>();
+  const rootTenants: TenantNode[] = [];
+
+  for (const tenant of tenants) {
+    tenantMap.set(tenant.id, { ...tenant, children: [] });
+  }
+
+  for (const tenant of tenants) {
+    const node = tenantMap.get(tenant.id)!;
+    if (tenant.parentId) {
+      const parent = tenantMap.get(tenant.parentId);
+      if (parent) {
+        parent.children.push(node);
+      } else {
+        rootTenants.push(node); // Orphaned
+      }
+    } else {
+      rootTenants.push(node);
+    }
+  }
+
+  return rootTenants;
+}
+
+const TenantRow: React.FC<{
+  tenant: TenantNode;
+  level: number;
+  onDelete: (id: string, name: string) => void;
+  isDeleting: boolean;
+}> = ({ tenant, level, onDelete, isDeleting }) => {
   const navigate = useNavigate();
+  return (
+    <>
+      <TableRow key={tenant.id}>
+        <TableCell style={{ paddingLeft: `${1 + level * 1.5}rem` }}>
+          <div className="flex items-center gap-2">
+            {level > 0 && <CornerDownRight size={14} className="text-muted-foreground" />}
+            <span className="font-semibold">{tenant.name}</span>
+          </div>
+        </TableCell>
+        <TableCell>
+          <Badge variant="outline" className="text-[10px] font-mono">
+            {tenant.type || "PERSONAL"}
+          </Badge>
+        </TableCell>
+        <TableCell>{tenant.slug}</TableCell>
+        <TableCell>
+          <Badge
+            variant={
+              tenant.status === "active"
+                ? "default"
+                : tenant.status === "pending"
+                ? "secondary"
+                : "muted"
+            }
+          >
+            {t(`ui.common.status.${tenant.status}`, 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} />
+              {t("ui.common.edit", "편집")}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onDelete(tenant.id, tenant.name)}
+              disabled={isDeleting}
+            >
+              <Trash2 size={14} />
+              {t("ui.common.delete", "삭제")}
+            </Button>
+          </div>
+        </TableCell>
+      </TableRow>
+      {tenant.children.map((child) => (
+        <TenantRow
+          key={child.id}
+          tenant={child}
+          level={level + 1}
+          onDelete={onDelete}
+          isDeleting={isDeleting}
+        />
+      ))}
+    </>
+  );
+};
+
+function TenantListPage() {
   const query = useQuery({
-    queryKey: ["tenants", { limit: 50, offset: 0 }],
-    queryFn: () => fetchTenants(50, 0),
+    queryKey: ["tenants", { limit: 1000, offset: 0 }], // Fetch all to build tree
+    queryFn: () => fetchTenants(1000, 0),
   });
 
   const deleteMutation = useMutation({
@@ -43,7 +155,7 @@ function TenantListPage() {
       ? t("msg.admin.tenants.fetch_error", "테넌트 목록 조회에 실패했습니다.")
       : null;
 
-  const items = query.data?.items ?? [];
+  const tenantTree = query.data?.items ? buildTenantTree(query.data.items) : [];
 
   const handleDelete = (tenantId: string, tenantName: string) => {
     if (
@@ -148,14 +260,14 @@ function TenantListPage() {
             <TableBody>
               {query.isLoading && (
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={6}>
                     {t("msg.common.loading", "로딩 중...")}
                   </TableCell>
                 </TableRow>
               )}
-              {!query.isLoading && items.length === 0 && (
+              {!query.isLoading && tenantTree.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                     {t(
                       "msg.admin.tenants.empty",
                       "아직 등록된 테넌트가 없습니다.",
@@ -163,60 +275,14 @@ function TenantListPage() {
                   </TableCell>
                 </TableRow>
               )}
-              {items.map((tenant) => (
-                <TableRow key={tenant.id}>
-                  <TableCell className="font-semibold">{tenant.name}</TableCell>
-                  <TableCell>
-                    <Badge variant="outline" className="text-[10px] font-mono">
-                      {tenant.type || "PERSONAL"}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>{tenant.slug}</TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={
-                        tenant.status === "active"
-                          ? "default"
-                          : tenant.status === "pending"
-                            ? "secondary"
-                            : "muted"
-                      }
-                      className={
-                        tenant.status === "pending"
-                          ? "bg-yellow-100 text-yellow-800"
-                          : ""
-                      }
-                    >
-                      {t(`ui.common.status.${tenant.status}`, 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} />
-                        {t("ui.common.edit", "편집")}
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleDelete(tenant.id, tenant.name)}
-                        disabled={deleteMutation.isPending}
-                      >
-                        <Trash2 size={14} />
-                        {t("ui.common.delete", "삭제")}
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
+              {tenantTree.map((tenant) => (
+                <TenantRow
+                  key={tenant.id}
+                  tenant={tenant}
+                  level={0}
+                  onDelete={handleDelete}
+                  isDeleting={deleteMutation.isPending}
+                />
               ))}
             </TableBody>
           </Table>
@@ -227,3 +293,4 @@ function TenantListPage() {
 }
 
 export default TenantListPage;
+

adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx

@@ -1,7 +1,18 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Plus, Trash2, Upload, Users } from "lucide-react";
-import { useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  RefreshCw,
+  Shield,
+  Trash2,
+  UserMinus,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
 import { toast } from "sonner";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -12,15 +23,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../../components/ui/dialog";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
 import {
@@ -32,272 +34,354 @@ import {
   TableRow,
 } from "../../../components/ui/table";
 import {
+  addGroupMember,
   createGroup,
   deleteGroup,
   fetchGroups,
-  importOrgChart,
+  removeGroupMember,
+  type GroupSummary,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 
-export function TenantUserGroupsTab() {
-  const { tenantId } = useParams<{ tenantId: string }>();
-  const queryClient = useQueryClient();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [newGroupName, setNewGroupName] = useState("");
-  const [newGroupDesc, setNewGroupDesc] = useState("");
-  const [newParentId, setNewParentId] = useState("");
-  const [newUnitType, setNewUnitType] = useState("");
+type UserGroupNode = GroupSummary & { children: UserGroupNode[] };
 
-  const { data: groups, isLoading } = useQuery({
-    queryKey: ["tenant-user-groups", tenantId],
-    queryFn: () => fetchGroups(tenantId!),
-    enabled: !!tenantId,
-  });
+function buildGroupTree(groups: GroupSummary[]): UserGroupNode[] {
+    const nodeMap = new Map<string, UserGroupNode>();
+    const rootNodes: UserGroupNode[] = [];
+  
+    groups.forEach((group) => {
+      nodeMap.set(group.id, { ...group, children: [] });
+    });
+  
+    groups.forEach((group) => {
+        const node = nodeMap.get(group.id)!;
+        if (group.parentId && nodeMap.has(group.parentId)) {
+            const parent = nodeMap.get(group.parentId)!;
+            parent.children.push(node);
+        } else {
+            rootNodes.push(node);
+        }
+    });
 
-  const createMutation = useMutation({
-    mutationFn: () =>
-      createGroup(tenantId!, {
-        name: newGroupName,
-        description: newGroupDesc,
-        parentId: newParentId || undefined,
-        unitType: newUnitType || undefined,
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["tenant-user-groups", tenantId],
-      });
-      setIsCreateOpen(false);
-      setNewGroupName("");
-      setNewGroupDesc("");
-      setNewParentId("");
-      setNewUnitType("");
-      toast.success(t("msg.admin.groups.list.create_success", "조직 단위가 생성되었습니다."));
-    },
-    onError: (error: any) => {
-      toast.error(t("msg.admin.groups.list.create_error", "생성 실패", { error: String(error.message) }));
-    },
-  });
+    const sortNodes = (nodes: UserGroupNode[]) => {
+        nodes.sort((a, b) => a.name.localeCompare(b.name));
+        nodes.forEach(node => sortNodes(node.children));
+    };
+    sortNodes(rootNodes);
 
-  const importMutation = useMutation({
-    mutationFn: (file: File) => importOrgChart(tenantId!, file),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["tenant-user-groups", tenantId],
-      });
-      toast.success(t("msg.admin.groups.list.import_success", "조직도가 임포트되었습니다."));
-    },
-    onError: (error: any) => {
-      toast.error(t("msg.admin.groups.list.import_error", "가져오기 실패", { error: String(error.message) }));
-    },
-  });
+    return rootNodes;
+  }
 
-  const deleteMutation = useMutation({
-    mutationFn: (groupId: string) => deleteGroup(tenantId!, groupId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["tenant-user-groups", tenantId],
-      });
-      toast.success(t("msg.admin.groups.list.delete_success", "조직 단위가 삭제되었습니다."));
-    },
-  });
+interface UserGroupTreeNodeProps {
+  node: UserGroupNode;
+  level: number;
+  onSelect: (groupId: string) => void;
+  selectedGroupId: string | null;
+  onDelete: (groupId: string, groupName: string) => void;
+  onAddSubGroup: (parentId: string) => void;
+}
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      importMutation.mutate(file);
-    }
-  };
-
-  if (isLoading) return <div className="p-8 text-center text-muted-foreground">{t("msg.admin.groups.list.loading", "로딩 중...")}</div>;
+const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
+  node,
+  level,
+  onSelect,
+  selectedGroupId,
+  onDelete,
+  onAddSubGroup,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children && node.children.length > 0;
 
   return (
-    <div className="space-y-6 mt-6">
-      <Card className="border-none shadow-sm bg-[var(--color-panel)]">
-        <CardHeader className="flex flex-row items-center justify-between">
-          <div className="space-y-1">
-            <CardTitle className="text-2xl font-bold">
-              {t("ui.admin.groups.list.title", "조직 관리")}
-            </CardTitle>
-            <CardDescription>
-              {t("msg.admin.groups.list.subtitle", "이 테넌트에 정의된 조직 단위들을 관리합니다.")}
-            </CardDescription>
+    <>
+      <TableRow
+        key={node.id}
+        className={`cursor-pointer transition-colors hover:bg-muted/50 ${
+          selectedGroupId === node.id ? "bg-primary/5" : ""
+        }`}
+        onClick={() => onSelect(node.id)}
+      >
+        <TableCell style={{ paddingLeft: `${1 + level * 2}rem` }}>
+          <div className="flex items-center gap-2">
+            {hasChildren && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsExpanded(!isExpanded);
+                }}
+              >
+                {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+              </Button>
+            )}
+            {!hasChildren && <div className="w-6" />}
+            <Users size={14} className="text-muted-foreground" />
+            <span className="font-semibold">{node.name}</span>
+            <Badge variant="outline" className="text-xs">
+              {node.unitType || "Team"}
+            </Badge>
           </div>
-          <div className="flex gap-2">
-            <input
-              type="file"
-              ref={fileInputRef}
-              className="hidden"
-              accept=".csv"
-              onChange={handleFileChange}
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={importMutation.isPending}
-            >
-              {importMutation.isPending ? (
-                t("ui.common.requesting", "요청 중...")
-              ) : (
-                <>
-                  <Upload size={16} className="mr-2" />
-                  {t("ui.admin.groups.import_csv", "CSV 임포트")}
-                </>
-              )}
+        </TableCell>
+        <TableCell className="text-center">
+            <Badge variant="secondary">{node.members?.length || 0}</Badge>
+        </TableCell>
+        <TableCell className="text-right">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddSubGroup(node.id);
+            }}
+          >
+            <Plus size={14} className="mr-1" />
+            {t("ui.admin.groups.add_unit", "하위 조직 추가")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(node.id, node.name);
+            }}
+          >
+            <Trash2 size={14} className="text-destructive" />
+          </Button>
+        </TableCell>
+      </TableRow>
+      {isExpanded && hasChildren && node.children.map((child) => (
+        <UserGroupTreeNode
+          key={child.id}
+          node={child}
+          level={level + 1}
+          onSelect={onSelect}
+          selectedGroupId={selectedGroupId}
+          onDelete={onDelete}
+          onAddSubGroup={onAddSubGroup}
+        />
+      ))}
+    </>
+  );
+};
+
+
+export function TenantUserGroupsTab() {
+    const params = useParams<{ tenantId: string }>();
+    const tenantId = params.tenantId ?? "";
+  
+    const [newGroupName, setNewGroupName] = useState("");
+    const [newGroupDesc, setNewGroupNameDesc] = useState("");
+    const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
+    const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);
+  
+    const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  
+    const groupsQuery = useQuery({
+      queryKey: ["groups", tenantId],
+      queryFn: () => fetchGroups(tenantId),
+      enabled: !!tenantId,
+    });
+  
+    const createMutation = useMutation({
+      mutationFn: () =>
+        createGroup(tenantId, {
+          name: newGroupName,
+          description: newGroupDesc,
+          unitType: newGroupUnitType,
+          parentId: newGroupParentId || undefined,
+        }),
+      onSuccess: () => {
+        toast.success(t("msg.admin.groups.list.create_success", "그룹이 성공적으로 생성되었습니다."));
+        groupsQuery.refetch();
+        setNewGroupName("");
+        setNewGroupNameDesc("");
+        setNewGroupUnitType("Team");
+        setNewGroupParentId(null);
+      },
+      onError: (error: AxiosError<{ error?: string }>) => {
+        toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), { description: error.response?.data?.error || error.message });
+      }
+    });
+  
+    const deleteMutation = useMutation({
+        mutationFn: (id: string) => deleteGroup(tenantId, id),
+        onSuccess: () => {
+          toast.success(t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."));
+          groupsQuery.refetch();
+          if (selectedGroupId && selectedGroupId === (deleteMutation.variables as any)) {
+            setSelectedGroupId(null);
+          }
+        },
+        onError: (error: AxiosError<{ error?: string }>) => {
+          toast.error(t("msg.common.error", "그룹 삭제 실패"), { description: error.response?.data?.error || error.message });
+        }
+      });
+  
+    const addMemberMutation = useMutation({
+      mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+        addGroupMember(tenantId, groupId, userId),
+      onSuccess: () => {
+        toast.success(t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."));
+        groupsQuery.refetch();
+      },
+      onError: (error: AxiosError<{ error?: string }>) => {
+        toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
+      }
+    });
+  
+    const removeMemberMutation = useMutation({
+      mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+        removeGroupMember(tenantId, groupId, userId),
+      onSuccess: () => {
+        toast.success(t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."));
+        groupsQuery.refetch();
+      },
+      onError: (error: AxiosError<{ error?: string }>) => {
+        toast.error(t("msg.common.error", "오류 발생"), { description: error.response?.data?.error || error.message });
+      }
+    });
+  
+    const groupTree = groupsQuery.data ? buildGroupTree(groupsQuery.data) : [];
+  
+    const handleAddSubGroup = (parentId: string) => {
+      setNewGroupParentId(parentId);
+    };
+  
+    const handleDeleteGroup = (groupId: string, groupName: string) => {
+      if (window.confirm(t("msg.admin.groups.list.delete_confirm", `그룹 "{{name}}"을(를) 삭제하시겠습니까?`, { name: groupName }))) {
+        deleteMutation.mutate(groupId);
+      }
+    };
+  
+    const handleAddMember = (groupId: string) => {
+      const userId = window.prompt(t("msg.admin.groups.prompt.user_id", "추가할 사용자의 UUID를 입력하세요:"));
+      if (userId) {
+        addMemberMutation.mutate({ groupId, userId });
+      }
+    };
+  
+    const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);
+  
+    return (
+      <div className="space-y-6 mt-6">
+        <div className="grid gap-6 md:grid-cols-3">
+          <Card className="bg-[var(--color-panel)] md:col-span-1 border-primary/20">
+            <CardHeader>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <Plus size={18} /> {t("ui.admin.groups.create.title", "새 그룹 생성")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+            <div className="space-y-1">
+              <Label htmlFor="name">{t("ui.admin.groups.form.name_label", "그룹 이름")}</Label>
+              <Input id="name" value={newGroupName} onChange={(e) => setNewGroupName(e.target.value)} />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="unitType">{t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}</Label>
+              <Input id="unitType" value={newGroupUnitType} onChange={(e) => setNewGroupUnitType(e.target.value)} />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="parentId">{t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}</Label>
+              <select
+                id="parentId"
+                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+                value={newGroupParentId || ""}
+                onChange={(e) => setNewGroupParentId(e.target.value || null)}
+              >
+                <option value="">{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}</option>
+                {groupsQuery.data?.map(group => <option key={group.id} value={group.id}>{group.name}</option>)}
+              </select>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="desc">{t("ui.admin.groups.form.desc_label", "설명")}</Label>
+              <Input id="desc" value={newGroupDesc} onChange={(e) => setNewGroupNameDesc(e.target.value)} />
+            </div>
+            <Button className="w-full" onClick={() => createMutation.mutate()} disabled={!newGroupName || createMutation.isPending}>
+              {t("ui.admin.groups.form.submit", "생성하기")}
             </Button>
-            <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-              <DialogTrigger asChild>
-                <Button size="sm">
-                  <Plus size={16} className="mr-2" />
-                  {t("ui.admin.groups.add_unit", "조직 추가")}
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>{t("ui.admin.groups.create.title", "새 조직 단위 생성")}</DialogTitle>
-                  <DialogDescription>
-                    {t("ui.admin.groups.create.description", "부서나 팀과 같은 새로운 조직 단위를 추가합니다.")}
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="space-y-4 py-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="name">{t("ui.admin.groups.form.name_label", "조직명")}</Label>
-                    <Input
-                      id="name"
-                      placeholder={t("ui.admin.groups.form.name_placeholder", "예: 개발팀")}
-                      value={newGroupName}
-                      onChange={(e) => setNewGroupName(e.target.value)}
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="parentId">{t("ui.admin.groups.form.parent_label", "상위 조직")}</Label>
-                    <select
-                      id="parentId"
-                      className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
-                      value={newParentId}
-                      onChange={(e) => setNewParentId(e.target.value)}
-                    >
-                      <option value="">{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}</option>
-                      {groups?.map((g) => (
-                        <option key={g.id} value={g.id}>
-                          {g.name}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="unitType">{t("ui.admin.groups.form.unit_level_label", "조직 레벨")}</Label>
-                    <Input
-                      id="unitType"
-                      placeholder={t("ui.admin.groups.form.unit_level_placeholder", "예: 본부, 팀")}
-                      value={newUnitType}
-                      onChange={(e) => setNewUnitType(e.target.value)}
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="description">{t("ui.admin.groups.form.desc_label", "설명")}</Label>
-                    <Input
-                      id="description"
-                      placeholder={t("ui.admin.groups.form.desc_placeholder", "설명을 입력하세요.")}
-                      value={newGroupDesc}
-                      onChange={(e) => setNewGroupDesc(e.target.value)}
-                    />
-                  </div>
-                </div>
-                <DialogFooter>
-                  <Button
-                    variant="outline"
-                    onClick={() => setIsCreateOpen(false)}
-                  >
-                    {t("ui.common.cancel", "취소")}
-                  </Button>
-                  <Button
-                    onClick={() => createMutation.mutate()}
-                    disabled={!newGroupName || createMutation.isPending}
-                  >
-                    {createMutation.isPending ? t("ui.common.requesting", "생성 중...") : t("ui.admin.groups.form.submit", "생성하기")}
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="rounded-md border border-border overflow-hidden">
-            <Table>
-              <TableHeader className="bg-muted/30">
-                <TableRow>
-                  <TableHead className="font-bold">{t("ui.admin.groups.table.name", "이름")}</TableHead>
-                  <TableHead className="font-bold">{t("ui.admin.groups.table.level", "레벨")}</TableHead>
-                  <TableHead className="font-bold">{t("ui.admin.groups.form.desc_label", "설명")}</TableHead>
-                  <TableHead className="font-bold">{t("ui.admin.groups.table.created_at", "생성일")}</TableHead>
-                  <TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {groups?.length === 0 ? (
+            </CardContent>
+          </Card>
+  
+          <Card className="bg-[var(--color-panel)] md:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle>{t("ui.admin.groups.list.title", "User Groups")}</CardTitle>
+                <CardDescription>{t("msg.admin.groups.list.subtitle", "이 테넌트에 정의된 사용자 그룹 목록입니다.")}</CardDescription>
+              </div>
+              <Button variant="ghost" size="sm" onClick={() => groupsQuery.refetch()}><RefreshCw size={14} /></Button>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
                   <TableRow>
-                    <TableCell
-                      colSpan={5}
-                      className="text-center py-12 text-muted-foreground"
-                    >
-                      {t("msg.admin.groups.list.empty", "테넌트에 등록된 조직 단위가 없습니다.")}
-                    </TableCell>
+                    <TableHead>{t("ui.admin.groups.table.name", "NAME")}</TableHead>
+                    <TableHead className="text-center">{t("ui.admin.groups.table.members", "MEMBERS")}</TableHead>
+                    <TableHead className="text-right">{t("ui.admin.groups.table.actions", "ACTIONS")}</TableHead>
                   </TableRow>
-                ) : (
-                  groups?.map((group) => (
-                    <TableRow key={group.id} className="hover:bg-muted/30 transition-colors">
-                      <TableCell className="font-medium">
-                        <div className="flex items-center gap-2">
-                          <Users size={16} className="text-muted-foreground" />
-                          <Link
-                            to={`/tenants/${tenantId}/organization/${group.id}`}
-                            className="hover:underline text-primary"
-                          >
-                            {group.name}
-                          </Link>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        {group.unitType ? (
-                          <Badge variant="secondary" className="font-normal">{group.unitType}</Badge>
-                        ) : (
-                          "-"
-                        )}
-                      </TableCell>
-                      <TableCell className="max-w-[200px] truncate">{group.description || "-"}</TableCell>
-                      <TableCell className="text-muted-foreground text-sm">
-                        {group.createdAt
-                          ? new Date(group.createdAt).toLocaleDateString()
-                          : "-"}
-                      </TableCell>
+                </TableHeader>
+                <TableBody>
+                  {groupsQuery.isLoading && <TableRow><TableCell colSpan={3}>{t("msg.admin.groups.list.loading", "로딩 중...")}</TableCell></TableRow>}
+                  {!groupsQuery.isLoading && groupTree.length === 0 && <TableRow><TableCell colSpan={3} className="text-center py-8 text-muted-foreground">{t("msg.admin.groups.list.empty", "아직 등록된 그룹이 없습니다.")}</TableCell></TableRow>}
+                  {groupTree.map(node => (
+                    <UserGroupTreeNode
+                      key={node.id}
+                      node={node}
+                      level={0}
+                      onSelect={setSelectedGroupId}
+                      selectedGroupId={selectedGroupId}
+                      onDelete={handleDeleteGroup}
+                      onAddSubGroup={handleAddSubGroup}
+                    />
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </div>
+  
+        {currentGroup && (
+          <Card className="bg-[var(--color-panel)] border-t-4 border-t-primary">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Shield size={18} className="text-primary" /> {t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", { name: currentGroup.name })}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex justify-end mb-4">
+                <Button size="sm" onClick={() => handleAddMember(currentGroup.id)} disabled={addMemberMutation.isPending}>
+                  <UserPlus size={14} className="mr-1" /> {t("ui.common.add", "멤버 추가")}
+                </Button>
+              </div>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t("ui.admin.groups.members.table.name", "이름")}</TableHead>
+                    <TableHead>{t("ui.admin.groups.members.table.email", "이메일")}</TableHead>
+                    <TableHead className="text-right">{t("ui.admin.groups.members.table.remove", "제거")}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {currentGroup.members?.length === 0 && <TableRow><TableCell colSpan={3} className="text-center py-4 text-muted-foreground">{t("msg.admin.groups.members.empty", "멤버가 없습니다.")}</TableCell></TableRow>}
+                  {currentGroup.members?.map(user => (
+                    <TableRow key={user.id}>
+                      <TableCell className="font-medium">{user.name}</TableCell>
+                      <TableCell className="text-muted-foreground">{user.email}</TableCell>
                       <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="text-destructive hover:bg-destructive/10"
-                          onClick={() => {
-                            if (
-                              confirm(
-                                t("msg.admin.groups.list.delete_confirm", "정말로 삭제하시겠습니까?")
-                              )
-                            ) {
-                              deleteMutation.mutate(group.id);
-                            }
-                          }}
-                        >
-                          <Trash2 size={16} />
+                        <Button variant="ghost" size="sm" onClick={() => removeMemberMutation.mutate({ groupId: currentGroup.id, userId: user.id })} disabled={removeMemberMutation.isPending}>
+                          <UserMinus size={14} className="text-destructive" />
                         </Button>
                       </TableCell>
                     </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    );
+  }
+  
+  export default TenantUserGroupsTab;