~20250428 작업사항

1 files changed, 266 insertions, 0 deletions

diff --git a/lib/items/table/import-excel-button.tsx b/lib/items/table/import-excel-button.tsx
new file mode 100644
index 00000000..484fd778
--- /dev/null
+++ b/lib/items/table/import-excel-button.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Upload } from "lucide-react"
+import { toast } from "sonner"
+import * as ExcelJS from 'exceljs'
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Progress } from "@/components/ui/progress"
+import { processFileImport } from "./import-item-handler" // 별도 파일로 분리
+
+interface ImportItemButtonProps {
+  onSuccess?: () => void
+}
+
+export function ImportItemButton({ onSuccess }: ImportItemButtonProps) {
+  const [open, setOpen] = React.useState(false)
+  const [file, setFile] = React.useState<File | null>(null)
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+  const [error, setError] = React.useState<string | null>(null)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일 선택 처리
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0]
+    if (!selectedFile) return
+
+    if (!selectedFile.name.endsWith('.xlsx') && !selectedFile.name.endsWith('.xls')) {
+      setError("Excel 파일(.xlsx 또는 .xls)만 가능합니다.")
+      return
+    }
+
+    setFile(selectedFile)
+    setError(null)
+  }
+
+  // 데이터 가져오기 처리
+  const handleImport = async () => {
+    if (!file) {
+      setError("가져올 파일을 선택해주세요.")
+      return
+    }
+
+    try {
+      setIsUploading(true)
+      setProgress(0)
+      setError(null)
+
+      // 파일을 ArrayBuffer로 읽기
+      const arrayBuffer = await file.arrayBuffer();
+      
+      // ExcelJS 워크북 로드
+      const workbook = new ExcelJS.Workbook();
+      await workbook.xlsx.load(arrayBuffer);
+      
+      // 첫 번째 워크시트 가져오기
+      const worksheet = workbook.worksheets[0];
+      if (!worksheet) {
+        throw new Error("Excel 파일에 워크시트가 없습니다.");
+      }
+      
+      // 헤더 행 찾기
+      let headerRowIndex = 1;
+      let headerRow: ExcelJS.Row | undefined;
+      let headerValues: (string | null)[] = [];
+      
+      worksheet.eachRow((row, rowNumber) => {
+        const values = row.values as (string | null)[];
+        if (!headerRow && values.some(v => v === "아이템 코드" || v === "itemCode" || v === "item_code")) {
+          headerRowIndex = rowNumber;
+          headerRow = row;
+          headerValues = [...values];
+        }
+      });
+      
+      if (!headerRow) {
+        throw new Error("Excel 파일에서 헤더 행을 찾을 수 없습니다.");
+      }
+      
+      // 헤더를 기반으로 인덱스 매핑 생성
+      const headerMapping: Record<string, number> = {};
+      headerValues.forEach((value, index) => {
+        if (typeof value === 'string') {
+          headerMapping[value] = index;
+        }
+      });
+      
+      // 필수 헤더 확인
+      const requiredHeaders = ["아이템 코드", "아이템 명", "설명"];
+      const alternativeHeaders = {
+        "아이템 코드": ["itemCode", "item_code"],
+        "아이템 명": ["itemName", "item_name"],
+        "설명": ["description"]
+      };
+      
+      // 헤더 매핑 확인 (대체 이름 포함)
+      const missingHeaders = requiredHeaders.filter(header => {
+        const alternatives = alternativeHeaders[header as keyof typeof alternativeHeaders] || [];
+        return !(header in headerMapping) && 
+               !alternatives.some(alt => alt in headerMapping);
+      });
+      
+      if (missingHeaders.length > 0) {
+        throw new Error(`다음 필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);
+      }
+      
+      // 데이터 행 추출 (헤더 이후 행부터)
+      const dataRows: Record<string, any>[] = [];
+      
+      worksheet.eachRow((row, rowNumber) => {
+        if (rowNumber > headerRowIndex) {
+          const rowData: Record<string, any> = {};
+          const values = row.values as (string | null | undefined)[];
+          
+          // 헤더 매핑에 따라 데이터 추출
+          Object.entries(headerMapping).forEach(([header, index]) => {
+            rowData[header] = values[index] || "";
+          });
+          
+          // 빈 행이 아닌 경우만 추가
+          if (Object.values(rowData).some(value => value && value.toString().trim() !== "")) {
+            dataRows.push(rowData);
+          }
+        }
+      });
+      
+      if (dataRows.length === 0) {
+        throw new Error("Excel 파일에 가져올 데이터가 없습니다.");
+      }
+      
+      // 진행 상황 업데이트를 위한 콜백
+      const updateProgress = (current: number, total: number) => {
+        const percentage = Math.round((current / total) * 100);
+        setProgress(percentage);
+      };
+      
+      // 실제 데이터 처리는 별도 함수에서 수행
+      const result = await processFileImport(
+        dataRows, 
+        updateProgress
+      );
+      
+      // 처리 완료
+      toast.success(`${result.successCount}개의 아이템이 성공적으로 가져와졌습니다.`);
+      
+      if (result.errorCount > 0) {
+        toast.warning(`${result.errorCount}개의 항목은 처리할 수 없었습니다.`);
+      }
+      
+      // 상태 초기화 및 다이얼로그 닫기
+      setFile(null);
+      setOpen(false);
+      
+      // 성공 콜백 호출
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error) {
+      console.error("Excel 파일 처리 중 오류 발생:", error);
+      setError(error instanceof Error ? error.message : "파일 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // 다이얼로그 열기/닫기 핸들러
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      // 닫을 때 상태 초기화
+      setFile(null)
+      setError(null)
+      setProgress(0)
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    }
+    setOpen(newOpen)
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        className="gap-2"
+        onClick={() => setOpen(true)}
+        disabled={isUploading}
+      >
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>아이템 가져오기</DialogTitle>
+            <DialogDescription>
+              아이템을 Excel 파일에서 가져옵니다.
+              <br />
+              올바른 형식의 Excel 파일(.xlsx)을 업로드하세요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="flex items-center gap-4">
+              <input
+                type="file"
+                ref={fileInputRef}
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-foreground file:font-medium"
+                accept=".xlsx,.xls"
+                onChange={handleFileChange}
+                disabled={isUploading}
+              />
+            </div>
+
+            {file && (
+              <div className="text-sm text-muted-foreground">
+                선택된 파일: <span className="font-medium">{file.name}</span> ({(file.size / 1024).toFixed(1)} KB)
+              </div>
+            )}
+
+            {isUploading && (
+              <div className="space-y-2">
+                <Progress value={progress} />
+                <p className="text-sm text-muted-foreground text-center">
+                  {progress}% 완료
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <div className="text-sm font-medium text-destructive">
+                {error}
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isUploading}
+            >
+              취소
+            </Button>
+            <Button 
+              onClick={handleImport} 
+              disabled={!file || isUploading}
+            >
+              {isUploading ? "처리 중..." : "가져오기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
\ No newline at end of file