프론트엔드 UI/UX를 전면 개편

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

@@ -1,7 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Plus, Trash2, Users } from "lucide-react";
-import { useState } from "react";
+import { Plus, Trash2, Upload, Users } from "lucide-react";
+import { useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
 import {
   Card,
@@ -29,14 +31,23 @@ import {
   TableHeader,
   TableRow,
 } from "../../../components/ui/table";
-import { createGroup, deleteGroup, fetchGroups } from "../../../lib/adminApi";
+import {
+  createGroup,
+  deleteGroup,
+  fetchGroups,
+  importOrgChart,
+} 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("");
 
   const { data: groups, isLoading } = useQuery({
     queryKey: ["tenant-user-groups", tenantId],
@@ -46,7 +57,12 @@ export function TenantUserGroupsTab() {
 
   const createMutation = useMutation({
     mutationFn: () =>
-      createGroup(tenantId!, { name: newGroupName, description: newGroupDesc }),
+      createGroup(tenantId!, {
+        name: newGroupName,
+        description: newGroupDesc,
+        parentId: newParentId || undefined,
+        unitType: newUnitType || undefined,
+      }),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["tenant-user-groups", tenantId],
@@ -54,10 +70,25 @@ export function TenantUserGroupsTab() {
       setIsCreateOpen(false);
       setNewGroupName("");
       setNewGroupDesc("");
-      alert("User group created successfully");
+      setNewParentId("");
+      setNewUnitType("");
+      toast.success(t("msg.admin.groups.list.create_success", "조직 단위가 생성되었습니다."));
     },
     onError: (error: any) => {
-      alert(error.message || "Failed to create user group");
+      toast.error(t("msg.admin.groups.list.create_error", { error: error.message }));
+    },
+  });
+
+  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: error.message }));
     },
   });
 
@@ -67,137 +98,204 @@ export function TenantUserGroupsTab() {
       queryClient.invalidateQueries({
         queryKey: ["tenant-user-groups", tenantId],
       });
-      alert("User group deleted successfully");
+      toast.success(t("msg.admin.groups.list.delete_success", "조직 단위가 삭제되었습니다."));
     },
   });
 
-  if (isLoading) return <div>Loading user groups...</div>;
+  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>;
 
   return (
-    <div className="space-y-6">
-      <Card>
+    <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>
-            <CardTitle>User Groups</CardTitle>
+          <div className="space-y-1">
+            <CardTitle className="text-2xl font-bold">
+              {t("ui.admin.groups.list.title", "조직 관리")}
+            </CardTitle>
             <CardDescription>
-              Manage user groups within this tenant for collective permission
-              assignment.
+              {t("msg.admin.groups.list.subtitle", "이 테넌트에 정의된 조직 단위들을 관리합니다.")}
             </CardDescription>
           </div>
-          <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-            <DialogTrigger asChild>
-              <Button size="sm">
-                <Plus size={16} className="mr-2" />
-                Create Group
-              </Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Create User Group</DialogTitle>
-                <DialogDescription>
-                  Create a new group to manage users collectively.
-                </DialogDescription>
-              </DialogHeader>
-              <div className="space-y-4 py-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Group Name</Label>
-                  <Input
-                    id="name"
-                    placeholder="e.g. Developers, Project A Managers"
-                    value={newGroupName}
-                    onChange={(e) => setNewGroupName(e.target.value)}
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="description">Description</Label>
-                  <Input
-                    id="description"
-                    placeholder="Brief description of the group"
-                    value={newGroupDesc}
-                    onChange={(e) => setNewGroupDesc(e.target.value)}
-                  />
-                </div>
-              </div>
-              <DialogFooter>
-                <Button
-                  variant="outline"
-                  onClick={() => setIsCreateOpen(false)}
-                >
-                  Cancel
+          <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 임포트")}
+                </>
+              )}
+            </Button>
+            <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm">
+                  <Plus size={16} className="mr-2" />
+                  {t("ui.admin.groups.add_unit", "조직 추가")}
                 </Button>
-                <Button
-                  onClick={() => createMutation.mutate()}
-                  disabled={!newGroupName || createMutation.isPending}
-                >
-                  {createMutation.isPending ? "Creating..." : "Create Group"}
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </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>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Description</TableHead>
-                <TableHead>Created At</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {groups?.length === 0 ? (
+          <div className="rounded-md border border-border overflow-hidden">
+            <Table>
+              <TableHeader className="bg-muted/30">
                 <TableRow>
-                  <TableCell
-                    colSpan={4}
-                    className="text-center py-8 text-muted-foreground"
-                  >
-                    No user groups found for this tenant.
-                  </TableCell>
+                  <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>
-              ) : (
-                groups?.map((group) => (
-                  <TableRow key={group.id}>
-                    <TableCell className="font-medium">
-                      <div className="flex items-center gap-2">
-                        <Users size={16} className="text-muted-foreground" />
-                        <Link
-                          to={`/tenants/${tenantId}/user-groups/${group.id}`}
-                          className="hover:underline text-primary"
-                        >
-                          {group.name}
-                        </Link>
-                      </div>
-                    </TableCell>
-                    <TableCell>{group.description || "-"}</TableCell>
-                    <TableCell>
-                      {group.createdAt
-                        ? new Date(group.createdAt).toLocaleDateString()
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                        onClick={() => {
-                          if (
-                            confirm(
-                              "Are you sure you want to delete this group?",
-                            )
-                          ) {
-                            deleteMutation.mutate(group.id);
-                          }
-                        }}
-                      >
-                        <Trash2 size={16} />
-                      </Button>
+              </TableHeader>
+              <TableBody>
+                {groups?.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={5}
+                      className="text-center py-12 text-muted-foreground"
+                    >
+                      {t("msg.admin.groups.list.empty", "테넌트에 등록된 조직 단위가 없습니다.")}
                     </TableCell>
                   </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
+                ) : (
+                  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>
+                      <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>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
         </CardContent>
       </Card>
     </div>