feat: implement CSV-based organization chart import and enhance group hierarchy

2026-03-04 14:20:49 +09:00
parent a973cd746b
commit 9ac99d2e0c
4 changed files with 187 additions and 20 deletions
--- a/adminfront/src/features/tenants/components/OrgChartUploadModal.tsx
+++ b/adminfront/src/features/tenants/components/OrgChartUploadModal.tsx
@@ -0,0 +1,128 @@
+import { useMutation } from "@tanstack/react-query";
+import { Download, FileText, Loader2, Upload } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { importOrgChart } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+interface OrgChartUploadModalProps {
+  tenantId: string;
+  onSuccess?: () => void;
+}
+
+export function OrgChartUploadModal({ tenantId, onSuccess }: OrgChartUploadModalProps) {
+  const [open, setOpen] = React.useState(false);
+  const [file, setFile] = React.useState<File | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const mutation = useMutation({
+    mutationFn: (file: File) => importOrgChart(tenantId, file),
+    onSuccess: () => {
+      toast.success(t("msg.admin.org.import_success", "조직도가 성공적으로 업로드되었습니다."));
+      setOpen(false);
+      onSuccess?.();
+    },
+    onError: (error: any) => {
+      toast.error(t("msg.admin.org.import_error", "조직도 업로드 실패"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+    }
+  };
+
+  const handleUpload = () => {
+    if (file) {
+      mutation.mutate(file);
+    }
+  };
+
+  const downloadTemplate = () => {
+    const headers = "email,name,organization,position,jobtitle,is_owner";
+    const example = "ceo@example.com,홍길동,경영진,대표이사,경영총괄,true
+cto@example.com,이몽룡,기술부문,이사,기술총괄,true
+user1@example.com,성춘향,기술부문/개발팀,팀원,프론트엔드 개발,false";
+    const blob = new Blob([`${headers}
+${example}`], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "org_chart_template.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Upload size={14} />
+          {t("ui.admin.org.import_btn", "조직도 임포트 (CSV)")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("ui.admin.org.import_title", "조직도 일괄 등록")}</DialogTitle>
+          <DialogDescription>
+            {t("msg.admin.org.import_description", "CSV 파일을 업로드하여 조직 계층과 멤버를 한 번에 구성합니다.")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="flex justify-between items-center">
+            <Button variant="ghost" size="sm" onClick={downloadTemplate} className="gap-2">
+              <Download size={14} />
+              {t("ui.admin.org.download_template", "템플릿 다운로드")}
+            </Button>
+            <input
+              type="file"
+              accept=".csv"
+              className="hidden"
+              ref={fileInputRef}
+              onChange={handleFileChange}
+            />
+            <Button onClick={() => fileInputRef.current?.click()} variant="secondary" size="sm">
+              {file ? t("ui.common.change_file", "파일 변경") : t("ui.common.select_file", "파일 선택")}
+            </Button>
+          </div>
+
+          {file && (
+            <div className="rounded-lg border p-4 bg-muted/20 flex items-center gap-3">
+              <FileText className="text-primary" />
+              <div className="flex-1 min-w-0">
+                <div className="font-medium truncate">{file.name}</div>
+                <div className="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button 
+            onClick={handleUpload} 
+            disabled={!file || mutation.isPending}
+            className="w-full sm:w-auto"
+          >
+            {mutation.isPending && <Loader2 size={16} className="mr-2 animate-spin" />}
+            {t("ui.admin.org.start_import", "임포트 시작")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
@@ -47,6 +47,7 @@ import {
  removeGroupMember,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
+import { OrgChartUploadModal } from "../components/OrgChartUploadModal";

 type UserGroupNode = GroupSummary & {
  children: UserGroupNode[];
@@ -443,13 +444,19 @@ function TenantGroupsPage() {
                )}
              </CardDescription>
            </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => groupsQuery.refetch()}
-            >
-              <RefreshCw size={14} />
-            </Button>
+            <div className="flex items-center gap-2">
+              <OrgChartUploadModal
+                tenantId={tenantId}
+                onSuccess={() => groupsQuery.refetch()}
+              />
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => groupsQuery.refetch()}
+              >
+                <RefreshCw size={14} />
+              </Button>
+            </div>
          </CardHeader>
          <CardContent>
            <Table>
--- a/adminfront/src/lib/adminApi.ts
+++ b/adminfront/src/lib/adminApi.ts
@@ -260,6 +260,21 @@ export async function removeGroupMember(
  );
 }

+export async function importOrgChart(tenantId: string, file: File) {
+  const formData = new FormData();
+  formData.append("file", file);
+  const { data } = await apiClient.post(
+    `/v1/admin/tenants/${tenantId}/organization/import`,
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    },
+  );
+  return data;
+}
+
 export type GroupRole = {
  tenantId: string;
  tenantName: string;
--- a/backend/internal/service/org_chart_service.go
+++ b/backend/internal/service/org_chart_service.go
@@ -81,6 +81,11 @@ func (s *orgChartService) ImportCSV(ctx context.Context, tenantID string, r io.R
 		orgPath := strings.TrimSpace(record[colMap["organization"]])
 		position := strings.TrimSpace(record[colMap["position"]])
 		jobTitle := strings.TrimSpace(record[colMap["jobtitle"]])
+		isOwner := false
+		if idx, ok := colMap["is_owner"]; ok && idx < len(record) {
+			val := strings.ToLower(record[idx])
+			isOwner = val == "true" || val == "y" || val == "1" || val == "yes"
+		}

 		if email == "" || name == "" || orgPath == "" {
 			continue
@@ -125,13 +130,25 @@ func (s *orgChartService) ImportCSV(ctx context.Context, tenantID string, r io.R

 		// 3. Sync Membership to Keto via Outbox
 		if s.ketoOutboxRepo != nil {
+			// Add as member of UserGroup
 			_ = s.ketoOutboxRepo.Create(ctx, &domain.KetoOutbox{
-				Namespace: "Tenant",
+				Namespace: "UserGroup",
 				Object:    leafID,
 				Relation:  "members",
 				Subject:   "User:" + kratosID,
 				Action:    domain.KetoOutboxActionCreate,
 			})
+
+			// Add as owner if applicable
+			if isOwner {
+				_ = s.ketoOutboxRepo.Create(ctx, &domain.KetoOutbox{
+					Namespace: "UserGroup",
+					Object:    leafID,
+					Relation:  "owners",
+					Subject:   "User:" + kratosID,
+					Action:    domain.KetoOutboxActionCreate,
+				})
+			}
 		}
 	}

@@ -161,19 +178,19 @@ func (s *orgChartService) ensureOrgPath(ctx context.Context, rootTenantID string
 		}

 		// Check DB if already exists
-		// We search for a USER_GROUP tenant with this name and parent
-		// Note: This logic assumes name is unique under a parent
-		// For robustness, we should probably have a better lookup
 		var existingID string
-		// In a real implementation, Repo should have a FindByParentAndName method
-		// For this implementation, we'll try to find by Name and ParentID in TenantRepo or UserGroupRepo
-		// Since we're using Polymorphic Tenants, let's assume we can lookup
-
-		// For simplicity in this POC, let's just use Create logic if not in cache
-		// In production, we MUST check DB first to avoid duplicates
-
-		// [Placeholder] Lookup in DB logic...
-		// existingID = s.lookupOrgUnit(ctx, rootTenantID, currentParentID, part)
+		if s.userGroupRepo != nil {
+			groups, err := s.userGroupRepo.ListByTenantID(ctx, rootTenantID)
+			if err == nil {
+				for _, g := range groups {
+					// Match by name and parent
+					if g.Name == part && ((g.ParentID == nil && currentParentID == rootTenantID) || (g.ParentID != nil && *g.ParentID == currentParentID)) {
+						existingID = g.ID
+						break
+					}
+				}
+			}
+		}

 		if existingID == "" {
 			// Create new unit