feat: Add Smart Excel Upload functionality for item inspection
- Introduced a new SmartExcelUploadModal component to facilitate bulk item inspection uploads via Excel. - Implemented logic for downloading templates, validating uploaded files, and parsing data for inspection criteria. - Enhanced the item inspection page to support dynamic loading of item process mappings and reference data for improved user experience. - Added necessary types and utility functions for template generation and parsing, ensuring robust handling of Excel data. - These changes aim to streamline the item inspection process and improve data management across multiple company implementations.
This commit is contained in:
kjs
@@ -0,0 +1,589 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useCallback } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Download,
|
||||
Upload,
|
||||
FileSpreadsheet,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
ArrowRight,
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
SmartExcelUploadConfig,
|
||||
ParseResult,
|
||||
ParsedSheetData,
|
||||
ValidationError,
|
||||
ItemProcessMapping,
|
||||
} from "./types";
|
||||
import { generateTemplate } from "./templateGenerator";
|
||||
import type { GenerateTemplateOptions } from "./templateGenerator";
|
||||
import { parseTemplate } from "./templateParser";
|
||||
import type { ParseOptions } from "./templateParser";
|
||||
|
||||
export interface SmartExcelUploadModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
config: SmartExcelUploadConfig;
|
||||
/** 참조 데이터 (DB에서 조회한 검사기준 등) */
|
||||
referenceData?: Record<string, any>[];
|
||||
/** 시트별/컬럼별 드롭다운 옵션 */
|
||||
dropdownOptions?: Record<string, string[]>;
|
||||
/** 품목별 공정 매핑 (INDIRECT 동적 드롭다운용) */
|
||||
itemProcessMappings?: ItemProcessMapping[];
|
||||
/** 라벨→코드 변환 매핑 */
|
||||
labelToCodeMap?: Record<string, Record<string, string>>;
|
||||
/** 추가 메타 정보 (item_code 등) */
|
||||
extraMeta?: Record<string, string>;
|
||||
/** 업로드 완료 콜백 */
|
||||
onUpload: (data: ParsedSheetData[]) => Promise<void>;
|
||||
/** 품목명 등 표시용 제목 */
|
||||
subtitle?: string;
|
||||
/** 데이터 로딩 중 여부 (외부에서 품목 등 로딩 시) */
|
||||
dataLoading?: boolean;
|
||||
/** 로딩 진행률 */
|
||||
loadProgress?: { loaded: number; total: number };
|
||||
}
|
||||
|
||||
type Step = "download" | "upload" | "validate" | "preview";
|
||||
|
||||
export function SmartExcelUploadModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
config,
|
||||
referenceData = [],
|
||||
dropdownOptions = {},
|
||||
itemProcessMappings = [],
|
||||
labelToCodeMap = {},
|
||||
extraMeta = {},
|
||||
onUpload,
|
||||
subtitle,
|
||||
dataLoading = false,
|
||||
loadProgress,
|
||||
}: SmartExcelUploadModalProps) {
|
||||
const [step, setStep] = useState<Step>("download");
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [templateDownloaded, setTemplateDownloaded] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [parseResult, setParseResult] = useState<ParseResult | null>(null);
|
||||
const [previewTab, setPreviewTab] = useState(0);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setStep("download");
|
||||
setTemplateDownloaded(false);
|
||||
setParseResult(null);
|
||||
setPreviewTab(0);
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
}, []);
|
||||
|
||||
const handleClose = (open: boolean) => {
|
||||
if (!open) reset();
|
||||
onOpenChange(open);
|
||||
};
|
||||
|
||||
// ═══════════════════ 템플릿 다운로드 ═══════════════════
|
||||
const handleDownload = async () => {
|
||||
setDownloading(true);
|
||||
try {
|
||||
const options: GenerateTemplateOptions = {
|
||||
config,
|
||||
referenceData,
|
||||
dropdownOptions,
|
||||
itemProcessMappings: itemProcessMappings.length > 0 ? itemProcessMappings : undefined,
|
||||
extraMeta,
|
||||
};
|
||||
const buffer = await generateTemplate(options);
|
||||
const blob = new Blob([buffer], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${config.templateName}_템플릿.xlsx`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
setTemplateDownloaded(true);
|
||||
toast.success("템플릿 다운로드 완료");
|
||||
} catch (err) {
|
||||
console.error("템플릿 생성 실패:", err);
|
||||
toast.error("템플릿 생성에 실패했습니다");
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ═══════════════════ 파일 업로드 + 파싱 ═══════════════════
|
||||
const handleFileChange = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
// 같은 파일 재선택 허용
|
||||
e.target.value = "";
|
||||
|
||||
if (!file.name.endsWith(".xlsx") && !file.name.endsWith(".xls")) {
|
||||
toast.error("엑셀 파일(.xlsx)만 업로드 가능합니다");
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
setStep("validate");
|
||||
setPreviewTab(0);
|
||||
|
||||
try {
|
||||
const parseOptions: ParseOptions = {
|
||||
config,
|
||||
file,
|
||||
currentReferenceData: referenceData,
|
||||
currentDropdownOptions: dropdownOptions,
|
||||
currentItemProcessMappings: itemProcessMappings.length > 0 ? itemProcessMappings : undefined,
|
||||
labelToCodeMap,
|
||||
};
|
||||
const result = await parseTemplate(parseOptions);
|
||||
setParseResult(result);
|
||||
|
||||
if (result.success) {
|
||||
setStep("preview");
|
||||
toast.success("검증 통과! 미리보기를 확인해주세요");
|
||||
} else if (result.warnings.length > 0 && result.errors.length === 0) {
|
||||
// 경고만 있는 경우
|
||||
setStep("validate");
|
||||
} else {
|
||||
setStep("validate");
|
||||
toast.error(`검증 실패: ${result.errors.length}건의 오류`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("파싱 실패:", err);
|
||||
toast.error("파일 파싱에 실패했습니다");
|
||||
setStep("upload");
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ═══════════════════ 저장 ═══════════════════
|
||||
const handleSave = async () => {
|
||||
if (!parseResult?.data?.length) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await onUpload(parseResult.data);
|
||||
toast.success("업로드 완료");
|
||||
handleClose(false);
|
||||
} catch (err) {
|
||||
console.error("저장 실패:", err);
|
||||
toast.error("저장에 실패했습니다");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ═══════════════════ 렌더링 ═══════════════════
|
||||
const totalRows =
|
||||
parseResult?.data?.reduce((sum, d) => sum + d.rows.length, 0) || 0;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[800px] max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FileSpreadsheet className="h-5 w-5" />
|
||||
{config.templateName} 엑셀 업로드
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{subtitle || "템플릿을 다운로드하여 데이터를 작성한 후 업로드해주세요"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 스텝 인디케이터 */}
|
||||
<div className="flex items-center gap-2 px-1 py-2">
|
||||
{(
|
||||
[
|
||||
{ key: "download", label: "템플릿 다운로드", icon: Download },
|
||||
{ key: "upload", label: "파일 업로드", icon: Upload },
|
||||
{ key: "validate", label: "검증", icon: AlertCircle },
|
||||
{ key: "preview", label: "미리보기", icon: CheckCircle2 },
|
||||
] as const
|
||||
).map(({ key, label, icon: Icon }, i) => {
|
||||
const stepOrder = ["download", "upload", "validate", "preview"];
|
||||
const currentIdx = stepOrder.indexOf(step);
|
||||
const thisIdx = stepOrder.indexOf(key);
|
||||
const isActive = key === step;
|
||||
const isDone = thisIdx < currentIdx;
|
||||
return (
|
||||
<React.Fragment key={key}>
|
||||
{i > 0 && (
|
||||
<ArrowRight
|
||||
className={cn(
|
||||
"h-3 w-3 shrink-0",
|
||||
isDone
|
||||
? "text-primary"
|
||||
: "text-muted-foreground/40"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: isDone
|
||||
? "bg-primary/10 text-primary"
|
||||
: "bg-muted text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
{label}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 컨텐츠 영역 */}
|
||||
<div className="flex-1 min-h-0 overflow-auto space-y-4">
|
||||
{/* ── 다운로드 단계 ── */}
|
||||
{(step === "download" || step === "upload") && (
|
||||
<div className="space-y-4">
|
||||
{/* 데이터 로딩 진행률 */}
|
||||
{dataLoading && loadProgress && loadProgress.total > 0 && (
|
||||
<div className="border rounded-lg p-4 space-y-2 bg-blue-50/50 border-blue-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-blue-600" />
|
||||
<span className="text-sm font-medium text-blue-700">
|
||||
데이터 로딩 중...
|
||||
</span>
|
||||
<span className="text-xs text-blue-600 ml-auto">
|
||||
{loadProgress.loaded.toLocaleString()} / {loadProgress.total.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-blue-100 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.round((loadProgress.loaded / loadProgress.total) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 템플릿 다운로드 */}
|
||||
<div
|
||||
className={cn(
|
||||
"border rounded-lg p-4 space-y-3",
|
||||
templateDownloaded
|
||||
? "border-primary/30 bg-primary/5"
|
||||
: "border-dashed",
|
||||
dataLoading && "opacity-50 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Download
|
||||
className={cn(
|
||||
"h-4 w-4",
|
||||
templateDownloaded
|
||||
? "text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm font-medium">
|
||||
1. 템플릿 다운로드
|
||||
</span>
|
||||
{templateDownloaded && (
|
||||
<Badge
|
||||
variant="default"
|
||||
className="text-[10px] h-5"
|
||||
>
|
||||
완료
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={templateDownloaded ? "outline" : "default"}
|
||||
onClick={handleDownload}
|
||||
disabled={downloading || dataLoading}
|
||||
className="h-8"
|
||||
>
|
||||
{downloading ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5 mr-1" />
|
||||
)}
|
||||
{templateDownloaded ? "다시 다운로드" : "템플릿 다운로드"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
<p>
|
||||
시트 구성:{" "}
|
||||
{config.sheets.map((s) => s.name).join(", ")}
|
||||
</p>
|
||||
{config.referenceSheet && (
|
||||
<p>참조 데이터: {referenceData.length}건 포함</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 파일 업로드 */}
|
||||
<div
|
||||
className={cn(
|
||||
"border rounded-lg p-4 space-y-3",
|
||||
dataLoading && "opacity-50 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Upload className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">
|
||||
2. 파일 업로드
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".xlsx,.xls"
|
||||
onChange={handleFileChange}
|
||||
className="text-sm file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-medium file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 cursor-pointer"
|
||||
disabled={dataLoading || uploading}
|
||||
/>
|
||||
{uploading && (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
)}
|
||||
</div>
|
||||
{dataLoading && (
|
||||
<p className="text-xs text-amber-600 flex items-center gap-1">
|
||||
<Info className="h-3 w-3" />
|
||||
데이터 로딩 중입니다. 잠시 기다려주세요
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 검증 결과 (에러) ── */}
|
||||
{step === "validate" && parseResult && (
|
||||
<div className="space-y-4">
|
||||
{/* 경고 메시지 */}
|
||||
{parseResult.warnings.map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-2 p-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-800"
|
||||
>
|
||||
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
<span className="text-sm">{w}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 에러 목록 */}
|
||||
{parseResult.errors.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-destructive" />
|
||||
<span className="text-sm font-medium text-destructive">
|
||||
검증 오류 {parseResult.errors.length}건
|
||||
</span>
|
||||
</div>
|
||||
<div className="border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-[10px] font-bold w-[100px]">
|
||||
시트
|
||||
</TableHead>
|
||||
<TableHead className="text-[10px] font-bold w-[60px]">
|
||||
행
|
||||
</TableHead>
|
||||
<TableHead className="text-[10px] font-bold w-[100px]">
|
||||
컬럼
|
||||
</TableHead>
|
||||
<TableHead className="text-[10px] font-bold">
|
||||
오류 내용
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{parseResult.errors.map((err, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="text-xs py-1.5">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px]"
|
||||
>
|
||||
{err.sheet}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs py-1.5 font-mono">
|
||||
{err.row}행
|
||||
</TableCell>
|
||||
<TableCell className="text-xs py-1.5">
|
||||
{err.column}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs py-1.5 text-destructive">
|
||||
{err.message}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setStep("upload");
|
||||
setParseResult(null);
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
}}
|
||||
>
|
||||
다시 업로드
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 미리보기 ── */}
|
||||
{step === "preview" && parseResult?.data && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium text-green-700">
|
||||
검증 통과
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
총 {totalRows}건
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 시트 탭 */}
|
||||
{parseResult.data.length > 1 && (
|
||||
<div className="flex gap-1.5">
|
||||
{parseResult.data.map((sheet, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => setPreviewTab(i)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-full text-xs font-medium transition-colors border",
|
||||
previewTab === i
|
||||
? "bg-primary text-primary-foreground border-primary"
|
||||
: "bg-muted/50 text-muted-foreground border-border hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
{sheet.sheetName}
|
||||
<span className="ml-1 opacity-70">
|
||||
({sheet.rows.length})
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 데이터 테이블 */}
|
||||
{parseResult.data[previewTab] && (
|
||||
<div className="border rounded-lg overflow-hidden max-h-[350px] overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-[10px] font-bold w-[40px]">
|
||||
#
|
||||
</TableHead>
|
||||
{(() => {
|
||||
const sheetData = parseResult.data[previewTab];
|
||||
const sheetConfig = config.sheets.find(
|
||||
(s) => s.name === sheetData.sheetName
|
||||
);
|
||||
return (sheetConfig?.columns || [])
|
||||
.filter((c) => !c.readOnly && !c.autoFill && !c.customFormula)
|
||||
.map((col) => (
|
||||
<TableHead
|
||||
key={col.key}
|
||||
className="text-[10px] font-bold"
|
||||
>
|
||||
{col.label}
|
||||
</TableHead>
|
||||
));
|
||||
})()}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{parseResult.data[previewTab].rows.map((row, i) => {
|
||||
const sheetData = parseResult.data[previewTab];
|
||||
const sheetConfig = config.sheets.find(
|
||||
(s) => s.name === sheetData.sheetName
|
||||
);
|
||||
return (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="text-[10px] py-1.5 text-muted-foreground">
|
||||
{i + 1}
|
||||
</TableCell>
|
||||
{(sheetConfig?.columns || [])
|
||||
.filter((c) => !c.readOnly && !c.autoFill && !c.customFormula)
|
||||
.map((col) => (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
className="text-xs py-1.5"
|
||||
>
|
||||
{row[`${col.key}_label`] ||
|
||||
row[col.key] ||
|
||||
"-"}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="shrink-0">
|
||||
<Button variant="outline" onClick={() => handleClose(false)}>
|
||||
취소
|
||||
</Button>
|
||||
{step === "preview" && (
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-1" />
|
||||
) : (
|
||||
<Upload className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
{totalRows}건 업로드
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user