조직도 기능 추가

adminfront/src/features/tenants/components/OrgChartUploadModal.tsx

@@ -1,6 +1,13 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { Download, FileText, Loader2, Upload } from "lucide-react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Download,
+  FileText,
+  Loader2,
+  Upload,
+} from "lucide-react";
 import * as React from "react";
 import { Button } from "../../../components/ui/button";
 import {
@@ -13,7 +20,11 @@ import {
   DialogTrigger,
 } from "../../../components/ui/dialog";
 import { toast } from "../../../components/ui/use-toast";
-import { importOrgChart } from "../../../lib/adminApi";
+import {
+  type ImportResult,
+  fetchImportProgress,
+  importOrgChart,
+} from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 
 interface OrgChartUploadModalProps {
@@ -27,52 +38,76 @@ export function OrgChartUploadModal({
 }: OrgChartUploadModalProps) {
   const [open, setOpen] = React.useState(false);
   const [file, setFile] = React.useState<File | null>(null);
+  const [result, setResult] = React.useState<ImportResult | null>(null);
+  const [progressId, setProgressId] = React.useState<string | 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);
+    mutationFn: ({ file, pid }: { file: File; pid: string }) =>
+      importOrgChart(tenantId, file, pid),
+    onSuccess: (data) => {
+      setResult(data);
+      setProgressId(null);
+      if (data.errors.length === 0) {
+        toast.success(
+          t(
+            "msg.admin.org.import_success",
+            "조직도가 성공적으로 업로드되었습니다.",
+          ),
+        );
+      } else {
+        toast.error(
+          t(
+            "msg.admin.org.import_partial_success",
+            "일부 데이터 업로드 중 오류가 발생했습니다.",
+          ),
+        );
+      }
       onSuccess?.();
     },
     onError: (error: AxiosError<{ error?: string }>) => {
+      setProgressId(null);
       toast.error(t("msg.admin.org.import_error", "조직도 업로드 실패"), {
         description: error.response?.data?.error || error.message,
       });
     },
   });
 
+  const { data: progressData } = useQuery({
+    queryKey: ["importProgress", progressId],
+    queryFn: () => fetchImportProgress(tenantId, progressId!),
+    enabled: !!progressId && mutation.isPending,
+    refetchInterval: 500,
+  });
+
+  const percent =
+    progressData && progressData.total > 0
+      ? Math.round((progressData.current / progressData.total) * 100)
+      : 0;
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
       setFile(selectedFile);
+      setResult(null);
     }
   };
 
   const handleUpload = () => {
     if (file) {
-      mutation.mutate(file);
+      const pid = Math.random().toString(36).substring(2, 15);
+      setProgressId(pid);
+      mutation.mutate({ file, pid });
     }
   };
 
   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 headers = "이메일,이름,소속,직급,직무,구분,그룹,디비젼,팀,셀";
+    const example = `test1@example.com,홍길동,한맥,수석,기획,팀장,전략그룹,기획실,인사팀,-
+test2@example.com,이몽룡,삼안,선임,개발,팀원,기술본부,개발실,개발1팀,A셀`;
+    const blob = new Blob([`\uFEFF${headers}\n${example}`], {
+      type: "text/csv;charset=utf-8",
+    });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
@@ -82,14 +117,23 @@ ${example}`,
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+        if (!val) {
+          setFile(null);
+          setResult(null);
+        }
+      }}
+    >
       <DialogTrigger asChild>
         <Button variant="outline" size="sm" className="gap-2">
           <Upload size={14} />
-          {t("ui.admin.org.import_btn", "조직도 임포트 (CSV)")}
+          {t("ui.admin.org.import_btn", "조직도 임포트 (CSV/XLSX)")}
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>
             {t("ui.admin.org.import_title", "조직도 일괄 등록")}
@@ -97,64 +141,151 @@ ${example}`,
           <DialogDescription>
             {t(
               "msg.admin.org.import_description",
-              "CSV 파일을 업로드하여 조직 계층과 멤버를 한 번에 구성합니다.",
+              "CSV 또는 XLSX 파일을 업로드하여 조직 계층과 멤버를 한 번에 구성합니다.",
             )}
           </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>
+        {!result ? (
+          <div className="space-y-4 py-4">
+            <div className="flex justify-between items-center">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={downloadTemplate}
+                className="gap-2"
+                disabled={mutation.isPending}
+              >
+                <Download size={14} />
+                {t("ui.admin.org.download_template", "템플릿 다운로드")}
+              </Button>
+              <input
+                type="file"
+                accept=".csv, .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                className="hidden"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                disabled={mutation.isPending}
+              />
+              <Button
+                onClick={() => fileInputRef.current?.click()}
+                variant="secondary"
+                size="sm"
+                disabled={mutation.isPending}
+              >
+                {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 flex-col gap-3">
+                <div className="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>
+                {mutation.isPending && progressId && (
+                  <div className="w-full mt-2 animate-in fade-in slide-in-from-bottom-2 duration-500">
+                    <div className="flex justify-between text-xs mb-1 font-medium text-muted-foreground">
+                      <span>데이터 처리 중...</span>
+                      <span>
+                        {percent}% ({progressData?.current || 0} /{" "}
+                        {progressData?.total || 0})
+                      </span>
+                    </div>
+                    <div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden relative">
+                      <div
+                        className="bg-primary h-full rounded-full transition-all duration-300 ease-out absolute top-0 left-0"
+                        style={{ width: `${Math.max(5, percent)}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
           </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 className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-primary/5 border border-primary/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  전체 행
+                </div>
+                <div className="text-2xl font-bold">{result.totalRows}</div>
+              </div>
+              <div className="p-4 rounded-lg bg-green-500/5 border border-green-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  처리 완료
+                </div>
+                <div className="text-2xl font-bold text-green-600">
+                  {result.processed}
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-blue-500/5 border border-blue-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  사용자 생성/업데이트
+                </div>
+                <div className="text-xl font-bold text-blue-600">
+                  {result.userCreated} / {result.userUpdated}
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-orange-500/5 border border-orange-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  조직(테넌트) 생성
+                </div>
+                <div className="text-2xl font-bold text-orange-600">
+                  {result.tenantCreated}
                 </div>
               </div>
             </div>
-          )}
-        </div>
+
+            {result.errors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium text-destructive">
+                  <AlertCircle size={16} />
+                  오류 목록 ({result.errors.length})
+                </div>
+                <div className="max-h-48 overflow-y-auto border rounded-md p-2 bg-destructive/5 text-xs font-mono space-y-1">
+                  {result.errors.map((err, idx) => (
+                    <div
+                      key={idx}
+                      className="text-destructive border-b border-destructive/10 pb-1 last:border-0"
+                    >
+                      {err}
+                    </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>
+          {!result ? (
+            <Button
+              onClick={handleUpload}
+              disabled={!file || mutation.isPending}
+              className="w-full sm:w-auto relative"
+            >
+              {mutation.isPending ? (
+                <>
+                  <Loader2 size={16} className="mr-2 animate-spin" />
+                  처리 중 ({percent}%)
+                </>
+              ) : (
+                t("ui.admin.org.start_import", "임포트 시작")
+              )}
+            </Button>
+          ) : (
+            <Button onClick={() => setOpen(false)} className="w-full sm:w-auto">
+              {t("ui.common.close", "닫기")}
+            </Button>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>