1332 lines
52 KiB
TypeScript
1332 lines
52 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useRef, useEffect } from "react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { toast } from "sonner";
|
||
import {
|
||
Upload,
|
||
FileSpreadsheet,
|
||
AlertCircle,
|
||
CheckCircle2,
|
||
ArrowRight,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import { importFromExcel, getExcelSheetNames } from "@/lib/utils/excelExport";
|
||
import { DynamicFormApi } from "@/lib/api/dynamicForm";
|
||
import { getTableSchema, TableColumn } from "@/lib/api/tableSchema";
|
||
import { cn } from "@/lib/utils";
|
||
import { findMappingByColumns, saveMappingTemplate } from "@/lib/api/excelMapping";
|
||
import { EditableSpreadsheet } from "./EditableSpreadsheet";
|
||
|
||
// 마스터-디테일 엑셀 업로드 설정 (버튼 설정에서 설정)
|
||
export interface MasterDetailExcelConfig {
|
||
// 테이블 정보
|
||
masterTable?: string;
|
||
detailTable?: string;
|
||
masterKeyColumn?: string;
|
||
detailFkColumn?: string;
|
||
// 채번
|
||
numberingRuleId?: string;
|
||
// 업로드 전 사용자가 선택할 마스터 테이블 필드
|
||
masterSelectFields?: Array<{
|
||
columnName: string;
|
||
columnLabel: string;
|
||
required: boolean;
|
||
inputType: "entity" | "date" | "text" | "select";
|
||
referenceTable?: string;
|
||
referenceColumn?: string;
|
||
displayColumn?: string;
|
||
}>;
|
||
// 엑셀에서 매핑할 디테일 테이블 필드
|
||
detailExcelFields?: Array<{
|
||
columnName: string;
|
||
columnLabel: string;
|
||
required: boolean;
|
||
}>;
|
||
masterDefaults?: Record<string, any>;
|
||
detailDefaults?: Record<string, any>;
|
||
}
|
||
|
||
export interface ExcelUploadModalProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
tableName: string;
|
||
uploadMode?: "insert" | "update" | "upsert";
|
||
keyColumn?: string;
|
||
onSuccess?: () => void;
|
||
userId?: string;
|
||
// 마스터-디테일 지원
|
||
screenId?: number;
|
||
isMasterDetail?: boolean;
|
||
masterDetailRelation?: {
|
||
masterTable: string;
|
||
detailTable: string;
|
||
masterKeyColumn: string;
|
||
detailFkColumn: string;
|
||
masterColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
|
||
detailColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
|
||
};
|
||
// 🆕 마스터-디테일 엑셀 업로드 설정
|
||
masterDetailExcelConfig?: MasterDetailExcelConfig;
|
||
// 🆕 단일 테이블 채번 설정
|
||
numberingRuleId?: string;
|
||
numberingTargetColumn?: string;
|
||
// 🆕 업로드 후 제어 실행 설정
|
||
afterUploadFlows?: Array<{ flowId: string; order: number }>;
|
||
}
|
||
|
||
interface ColumnMapping {
|
||
excelColumn: string;
|
||
systemColumn: string | null;
|
||
}
|
||
|
||
export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
|
||
open,
|
||
onOpenChange,
|
||
tableName,
|
||
uploadMode = "insert",
|
||
keyColumn,
|
||
onSuccess,
|
||
userId = "guest",
|
||
screenId,
|
||
isMasterDetail = false,
|
||
masterDetailRelation,
|
||
masterDetailExcelConfig,
|
||
// 단일 테이블 채번 설정
|
||
numberingRuleId,
|
||
numberingTargetColumn,
|
||
// 업로드 후 제어 실행 설정
|
||
afterUploadFlows,
|
||
}) => {
|
||
const [currentStep, setCurrentStep] = useState(1);
|
||
|
||
// 1단계: 파일 선택 & 미리보기
|
||
const [file, setFile] = useState<File | null>(null);
|
||
const [sheetNames, setSheetNames] = useState<string[]>([]);
|
||
const [selectedSheet, setSelectedSheet] = useState<string>("");
|
||
const [isDragOver, setIsDragOver] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const [detectedRange, setDetectedRange] = useState<string>("");
|
||
const [allData, setAllData] = useState<Record<string, any>[]>([]);
|
||
const [displayData, setDisplayData] = useState<Record<string, any>[]>([]);
|
||
|
||
// 2단계: 컬럼 매핑 + 매핑 템플릿 자동 적용
|
||
const [isAutoMappingLoaded, setIsAutoMappingLoaded] = useState(false);
|
||
const [excelColumns, setExcelColumns] = useState<string[]>([]);
|
||
const [systemColumns, setSystemColumns] = useState<TableColumn[]>([]);
|
||
const [columnMappings, setColumnMappings] = useState<ColumnMapping[]>([]);
|
||
|
||
// 3단계: 확인
|
||
const [isUploading, setIsUploading] = useState(false);
|
||
|
||
// 🆕 마스터-디테일 모드: 마스터 필드 입력값
|
||
const [masterFieldValues, setMasterFieldValues] = useState<Record<string, any>>({});
|
||
const [entitySearchData, setEntitySearchData] = useState<Record<string, any[]>>({});
|
||
const [entitySearchLoading, setEntitySearchLoading] = useState<Record<string, boolean>>({});
|
||
const [entityDisplayColumns, setEntityDisplayColumns] = useState<Record<string, string>>({});
|
||
|
||
// 🆕 엔티티 참조 데이터 로드
|
||
useEffect(() => {
|
||
console.log("🔍 엔티티 데이터 로드 체크:", {
|
||
masterSelectFields: masterDetailExcelConfig?.masterSelectFields,
|
||
open,
|
||
isMasterDetail,
|
||
});
|
||
|
||
if (!masterDetailExcelConfig?.masterSelectFields) return;
|
||
|
||
const loadEntityData = async () => {
|
||
const { apiClient } = await import("@/lib/api/client");
|
||
const { DynamicFormApi } = await import("@/lib/api/dynamicForm");
|
||
|
||
for (const field of masterDetailExcelConfig.masterSelectFields!) {
|
||
console.log("🔍 필드 처리:", field);
|
||
|
||
if (field.inputType === "entity") {
|
||
setEntitySearchLoading((prev) => ({ ...prev, [field.columnName]: true }));
|
||
try {
|
||
let refTable = field.referenceTable;
|
||
console.log("🔍 초기 refTable:", refTable);
|
||
|
||
let displayCol = field.displayColumn;
|
||
|
||
// referenceTable 또는 displayColumn이 없으면 DB에서 동적으로 조회
|
||
if ((!refTable || !displayCol) && masterDetailExcelConfig.masterTable) {
|
||
console.log("🔍 DB에서 referenceTable/displayColumn 조회 시도:", masterDetailExcelConfig.masterTable);
|
||
const colResponse = await apiClient.get(
|
||
`/table-management/tables/${masterDetailExcelConfig.masterTable}/columns`
|
||
);
|
||
console.log("🔍 컬럼 조회 응답:", colResponse.data);
|
||
|
||
if (colResponse.data?.success && colResponse.data?.data?.columns) {
|
||
const colInfo = colResponse.data.data.columns.find(
|
||
(c: any) => (c.columnName || c.column_name) === field.columnName
|
||
);
|
||
console.log("🔍 찾은 컬럼 정보:", colInfo);
|
||
if (colInfo) {
|
||
if (!refTable) {
|
||
refTable = colInfo.referenceTable || colInfo.reference_table;
|
||
console.log("🔍 DB에서 가져온 refTable:", refTable);
|
||
}
|
||
if (!displayCol) {
|
||
displayCol = colInfo.displayColumn || colInfo.display_column;
|
||
console.log("🔍 DB에서 가져온 displayColumn:", displayCol);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// displayColumn 저장 (Select 렌더링 시 사용)
|
||
if (displayCol) {
|
||
setEntityDisplayColumns((prev) => ({ ...prev, [field.columnName]: displayCol }));
|
||
}
|
||
|
||
if (refTable) {
|
||
console.log("🔍 엔티티 데이터 조회:", refTable);
|
||
const response = await DynamicFormApi.getTableData(refTable, {
|
||
page: 1,
|
||
pageSize: 1000,
|
||
});
|
||
console.log("🔍 엔티티 데이터 응답:", response);
|
||
// getTableData는 { success, data: [...] } 형식으로 반환
|
||
const rows = response.data?.rows || response.data;
|
||
if (response.success && rows && Array.isArray(rows)) {
|
||
setEntitySearchData((prev) => ({
|
||
...prev,
|
||
[field.columnName]: rows,
|
||
}));
|
||
console.log("✅ 엔티티 데이터 로드 성공:", field.columnName, rows.length, "개");
|
||
}
|
||
} else {
|
||
console.warn("❌ 엔티티 필드의 referenceTable을 찾을 수 없음:", field.columnName);
|
||
}
|
||
} catch (error) {
|
||
console.error("❌ 엔티티 데이터 로드 실패:", field.columnName, error);
|
||
} finally {
|
||
setEntitySearchLoading((prev) => ({ ...prev, [field.columnName]: false }));
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
if (open && isMasterDetail && masterDetailExcelConfig?.masterSelectFields?.length > 0) {
|
||
loadEntityData();
|
||
}
|
||
}, [open, isMasterDetail, masterDetailExcelConfig]);
|
||
|
||
// 마스터-디테일 모드에서 마스터 필드 입력 여부 확인
|
||
const isSimpleMasterDetailMode = isMasterDetail && masterDetailExcelConfig;
|
||
const hasMasterSelectFields = isSimpleMasterDetailMode &&
|
||
(masterDetailExcelConfig?.masterSelectFields?.length ?? 0) > 0;
|
||
|
||
// 마스터 필드가 모두 입력되었는지 확인
|
||
const isMasterFieldsValid = () => {
|
||
if (!hasMasterSelectFields) return true;
|
||
return masterDetailExcelConfig!.masterSelectFields!.every((field) => {
|
||
if (!field.required) return true;
|
||
const value = masterFieldValues[field.columnName];
|
||
return value !== undefined && value !== null && value !== "";
|
||
});
|
||
};
|
||
|
||
// 파일 선택 핸들러
|
||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const selectedFile = e.target.files?.[0];
|
||
if (!selectedFile) return;
|
||
await processFile(selectedFile);
|
||
};
|
||
|
||
// 파일 처리 공통 함수 (파일 선택 및 드래그 앤 드롭에서 공유)
|
||
const processFile = async (selectedFile: File) => {
|
||
const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
|
||
if (!["xlsx", "xls", "csv"].includes(fileExtension || "")) {
|
||
toast.error("엑셀 파일만 업로드 가능합니다. (.xlsx, .xls, .csv)");
|
||
return;
|
||
}
|
||
|
||
setFile(selectedFile);
|
||
|
||
try {
|
||
const sheets = await getExcelSheetNames(selectedFile);
|
||
setSheetNames(sheets);
|
||
setSelectedSheet(sheets[0] || "");
|
||
|
||
const data = await importFromExcel(selectedFile, sheets[0]);
|
||
setAllData(data);
|
||
setDisplayData(data);
|
||
|
||
if (data.length > 0) {
|
||
const columns = Object.keys(data[0]);
|
||
const lastCol = String.fromCharCode(64 + columns.length);
|
||
setDetectedRange(`A1:${lastCol}${data.length + 1}`);
|
||
setExcelColumns(columns);
|
||
}
|
||
|
||
toast.success(`파일이 선택되었습니다: ${selectedFile.name}`);
|
||
} catch (error) {
|
||
console.error("파일 읽기 오류:", error);
|
||
toast.error("파일을 읽는 중 오류가 발생했습니다.");
|
||
setFile(null);
|
||
}
|
||
};
|
||
|
||
// 드래그 앤 드롭 핸들러
|
||
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsDragOver(true);
|
||
};
|
||
|
||
const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsDragOver(false);
|
||
};
|
||
|
||
const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsDragOver(false);
|
||
|
||
const droppedFile = e.dataTransfer.files?.[0];
|
||
if (droppedFile) {
|
||
await processFile(droppedFile);
|
||
}
|
||
};
|
||
|
||
// 시트 변경 핸들러
|
||
const handleSheetChange = async (sheetName: string) => {
|
||
setSelectedSheet(sheetName);
|
||
if (!file) return;
|
||
|
||
try {
|
||
const data = await importFromExcel(file, sheetName);
|
||
setAllData(data);
|
||
setDisplayData(data);
|
||
|
||
if (data.length > 0) {
|
||
const columns = Object.keys(data[0]);
|
||
const lastCol = String.fromCharCode(64 + columns.length);
|
||
setDetectedRange(`A1:${lastCol}${data.length + 1}`);
|
||
setExcelColumns(columns);
|
||
}
|
||
} catch (error) {
|
||
console.error("시트 읽기 오류:", error);
|
||
toast.error("시트를 읽는 중 오류가 발생했습니다.");
|
||
}
|
||
};
|
||
|
||
// 테이블 스키마 가져오기 (2단계 진입 시)
|
||
useEffect(() => {
|
||
if (currentStep === 2 && tableName) {
|
||
loadTableSchema();
|
||
}
|
||
}, [currentStep, tableName]);
|
||
|
||
// 테이블 생성 시 자동 생성되는 시스템 컬럼 (매핑에서 제외)
|
||
const AUTO_GENERATED_COLUMNS = [
|
||
"id",
|
||
"created_date",
|
||
"updated_date",
|
||
"writer",
|
||
"company_code",
|
||
];
|
||
|
||
const loadTableSchema = async () => {
|
||
try {
|
||
console.log("🔍 테이블 스키마 로드 시작:", { tableName, isMasterDetail, isSimpleMasterDetailMode });
|
||
|
||
let allColumns: TableColumn[] = [];
|
||
|
||
// 🆕 마스터-디테일 간단 모드: 디테일 테이블 컬럼만 로드 (마스터 필드는 UI에서 선택)
|
||
if (isSimpleMasterDetailMode && masterDetailRelation) {
|
||
const { detailTable, detailFkColumn } = masterDetailRelation;
|
||
|
||
console.log("📊 마스터-디테일 간단 모드 스키마 로드 (디테일만):", { detailTable });
|
||
|
||
// 디테일 테이블 스키마만 로드 (마스터 정보는 UI에서 선택)
|
||
const detailResponse = await getTableSchema(detailTable);
|
||
if (detailResponse.success && detailResponse.data) {
|
||
// 설정된 detailExcelFields가 있으면 해당 필드만, 없으면 전체
|
||
const configuredFields = masterDetailExcelConfig?.detailExcelFields;
|
||
|
||
const detailCols = detailResponse.data.columns
|
||
.filter((col) => {
|
||
// 자동 생성 컬럼, FK 컬럼 제외
|
||
if (AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase())) return false;
|
||
if (col.name === detailFkColumn) return false;
|
||
|
||
// 설정된 필드가 있으면 해당 필드만
|
||
if (configuredFields && configuredFields.length > 0) {
|
||
return configuredFields.some((f) => f.columnName === col.name);
|
||
}
|
||
return true;
|
||
})
|
||
.map((col) => {
|
||
// 설정에서 라벨 찾기
|
||
const configField = configuredFields?.find((f) => f.columnName === col.name);
|
||
return {
|
||
...col,
|
||
label: configField?.columnLabel || col.label || col.name,
|
||
originalName: col.name,
|
||
sourceTable: detailTable,
|
||
};
|
||
});
|
||
allColumns = detailCols;
|
||
}
|
||
|
||
console.log("✅ 마스터-디테일 간단 모드 컬럼 로드 완료:", allColumns.length);
|
||
}
|
||
// 🆕 마스터-디테일 기존 모드: 두 테이블의 컬럼 합치기
|
||
else if (isMasterDetail && masterDetailRelation) {
|
||
const { masterTable, detailTable, detailFkColumn } = masterDetailRelation;
|
||
|
||
console.log("📊 마스터-디테일 스키마 로드:", { masterTable, detailTable });
|
||
|
||
// 마스터 테이블 스키마
|
||
const masterResponse = await getTableSchema(masterTable);
|
||
if (masterResponse.success && masterResponse.data) {
|
||
const masterCols = masterResponse.data.columns
|
||
.filter((col) => !AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase()))
|
||
.map((col) => ({
|
||
...col,
|
||
// 유니크 키를 위해 테이블명 접두사 추가
|
||
name: `${masterTable}.${col.name}`,
|
||
label: `[마스터] ${col.label || col.name}`,
|
||
originalName: col.name,
|
||
sourceTable: masterTable,
|
||
}));
|
||
allColumns = [...allColumns, ...masterCols];
|
||
}
|
||
|
||
// 디테일 테이블 스키마 (FK 컬럼 제외)
|
||
const detailResponse = await getTableSchema(detailTable);
|
||
if (detailResponse.success && detailResponse.data) {
|
||
const detailCols = detailResponse.data.columns
|
||
.filter((col) =>
|
||
!AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase()) &&
|
||
col.name !== detailFkColumn // FK 컬럼 제외
|
||
)
|
||
.map((col) => ({
|
||
...col,
|
||
// 유니크 키를 위해 테이블명 접두사 추가
|
||
name: `${detailTable}.${col.name}`,
|
||
label: `[디테일] ${col.label || col.name}`,
|
||
originalName: col.name,
|
||
sourceTable: detailTable,
|
||
}));
|
||
allColumns = [...allColumns, ...detailCols];
|
||
}
|
||
|
||
console.log("✅ 마스터-디테일 컬럼 로드 완료:", allColumns.length);
|
||
} else {
|
||
// 기존 단일 테이블 모드
|
||
const response = await getTableSchema(tableName);
|
||
|
||
console.log("📊 테이블 스키마 응답:", response);
|
||
|
||
if (response.success && response.data) {
|
||
// 자동 생성 컬럼 제외
|
||
allColumns = response.data.columns.filter(
|
||
(col) => !AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase())
|
||
);
|
||
} else {
|
||
console.error("❌ 테이블 스키마 로드 실패:", response);
|
||
return;
|
||
}
|
||
}
|
||
|
||
console.log("✅ 시스템 컬럼 로드 완료 (자동 생성 컬럼 제외):", allColumns);
|
||
setSystemColumns(allColumns);
|
||
|
||
// 기존 매핑 템플릿 조회
|
||
console.log("🔍 매핑 템플릿 조회 중...", { tableName, excelColumns });
|
||
const mappingResponse = await findMappingByColumns(tableName, excelColumns);
|
||
|
||
if (mappingResponse.success && mappingResponse.data) {
|
||
// 저장된 매핑 템플릿이 있으면 자동 적용
|
||
console.log("✅ 기존 매핑 템플릿 발견:", mappingResponse.data);
|
||
const savedMappings = mappingResponse.data.columnMappings;
|
||
|
||
const appliedMappings: ColumnMapping[] = excelColumns.map((col) => ({
|
||
excelColumn: col,
|
||
systemColumn: savedMappings[col] || null,
|
||
}));
|
||
setColumnMappings(appliedMappings);
|
||
setIsAutoMappingLoaded(true);
|
||
|
||
const matchedCount = appliedMappings.filter((m) => m.systemColumn).length;
|
||
toast.success(`이전 매핑 템플릿이 적용되었습니다. (${matchedCount}개 컬럼)`);
|
||
} else {
|
||
// 매핑 템플릿이 없으면 초기 상태로 설정
|
||
console.log("ℹ️ 매핑 템플릿 없음 - 새 엑셀 구조");
|
||
const initialMappings: ColumnMapping[] = excelColumns.map((col) => ({
|
||
excelColumn: col,
|
||
systemColumn: null,
|
||
}));
|
||
setColumnMappings(initialMappings);
|
||
setIsAutoMappingLoaded(false);
|
||
}
|
||
} catch (error) {
|
||
console.error("❌ 테이블 스키마 로드 실패:", error);
|
||
toast.error("테이블 스키마를 불러올 수 없습니다.");
|
||
}
|
||
};
|
||
|
||
// 자동 매핑 - 컬럼명과 라벨 모두 비교
|
||
const handleAutoMapping = () => {
|
||
const newMappings = excelColumns.map((excelCol) => {
|
||
const normalizedExcelCol = excelCol.toLowerCase().trim();
|
||
// [마스터], [디테일] 접두사 제거 후 비교
|
||
const cleanExcelCol = normalizedExcelCol.replace(/^\[(마스터|디테일)\]\s*/i, "");
|
||
|
||
// 1. 먼저 라벨로 매칭 시도 (접두사 제거 후)
|
||
let matchedSystemCol = systemColumns.find((sysCol) => {
|
||
if (!sysCol.label) return false;
|
||
// [마스터], [디테일] 접두사 제거 후 비교
|
||
const cleanLabel = sysCol.label.toLowerCase().trim().replace(/^\[(마스터|디테일)\]\s*/i, "");
|
||
return cleanLabel === normalizedExcelCol || cleanLabel === cleanExcelCol;
|
||
});
|
||
|
||
// 2. 라벨로 매칭되지 않으면 컬럼명으로 매칭 시도
|
||
if (!matchedSystemCol) {
|
||
matchedSystemCol = systemColumns.find((sysCol) => {
|
||
// 마스터-디테일 모드: originalName이 있으면 사용
|
||
const originalName = (sysCol as any).originalName;
|
||
const colName = originalName || sysCol.name;
|
||
return colName.toLowerCase().trim() === normalizedExcelCol || colName.toLowerCase().trim() === cleanExcelCol;
|
||
});
|
||
}
|
||
|
||
// 3. 여전히 매칭 안되면 전체 이름(테이블.컬럼)에서 컬럼 부분만 추출해서 비교
|
||
if (!matchedSystemCol) {
|
||
matchedSystemCol = systemColumns.find((sysCol) => {
|
||
// 테이블.컬럼 형식에서 컬럼만 추출
|
||
const nameParts = sysCol.name.split(".");
|
||
const colNameOnly = nameParts.length > 1 ? nameParts[1] : nameParts[0];
|
||
return colNameOnly.toLowerCase().trim() === normalizedExcelCol || colNameOnly.toLowerCase().trim() === cleanExcelCol;
|
||
});
|
||
}
|
||
|
||
return {
|
||
excelColumn: excelCol,
|
||
systemColumn: matchedSystemCol ? matchedSystemCol.name : null,
|
||
};
|
||
});
|
||
|
||
setColumnMappings(newMappings);
|
||
const matchedCount = newMappings.filter((m) => m.systemColumn).length;
|
||
toast.success(`${matchedCount}개 컬럼이 자동 매핑되었습니다.`);
|
||
};
|
||
|
||
// 컬럼 매핑 변경
|
||
const handleMappingChange = (excelColumn: string, systemColumn: string | null) => {
|
||
setColumnMappings((prev) =>
|
||
prev.map((mapping) =>
|
||
mapping.excelColumn === excelColumn ? { ...mapping, systemColumn } : mapping
|
||
)
|
||
);
|
||
};
|
||
|
||
// 다음 단계
|
||
const handleNext = () => {
|
||
if (currentStep === 1 && !file) {
|
||
toast.error("파일을 선택해주세요.");
|
||
return;
|
||
}
|
||
|
||
if (currentStep === 1 && displayData.length === 0) {
|
||
toast.error("데이터가 없습니다.");
|
||
return;
|
||
}
|
||
|
||
// 🆕 마스터-디테일 간단 모드: 마스터 필드 유효성 검사
|
||
if (currentStep === 1 && hasMasterSelectFields && !isMasterFieldsValid()) {
|
||
toast.error("마스터 정보를 모두 입력해주세요.");
|
||
return;
|
||
}
|
||
|
||
// 1단계 → 2단계 전환 시: 빈 헤더 열 제외
|
||
if (currentStep === 1) {
|
||
// 빈 헤더가 아닌 열만 필터링
|
||
const validColumnIndices: number[] = [];
|
||
const validColumns: string[] = [];
|
||
|
||
excelColumns.forEach((col, index) => {
|
||
if (col && col.trim() !== "") {
|
||
validColumnIndices.push(index);
|
||
validColumns.push(col);
|
||
}
|
||
});
|
||
|
||
// 빈 헤더 열이 있었다면 데이터에서도 해당 열 제거
|
||
if (validColumns.length < excelColumns.length) {
|
||
const removedCount = excelColumns.length - validColumns.length;
|
||
|
||
// 새로운 데이터: 유효한 열만 포함
|
||
const cleanedData = displayData.map((row) => {
|
||
const newRow: Record<string, any> = {};
|
||
validColumns.forEach((colName) => {
|
||
newRow[colName] = row[colName];
|
||
});
|
||
return newRow;
|
||
});
|
||
|
||
setExcelColumns(validColumns);
|
||
setDisplayData(cleanedData);
|
||
setAllData(cleanedData);
|
||
|
||
if (removedCount > 0) {
|
||
toast.info(`빈 헤더 ${removedCount}개 열이 제외되었습니다.`);
|
||
}
|
||
}
|
||
}
|
||
|
||
setCurrentStep((prev) => Math.min(prev + 1, 3));
|
||
};
|
||
|
||
// 이전 단계
|
||
const handlePrevious = () => {
|
||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||
};
|
||
|
||
// 업로드 핸들러
|
||
const handleUpload = async () => {
|
||
if (!file || !tableName) {
|
||
toast.error("필수 정보가 누락되었습니다.");
|
||
return;
|
||
}
|
||
|
||
setIsUploading(true);
|
||
|
||
try {
|
||
// allData를 사용하여 전체 데이터 업로드
|
||
const mappedData = allData.map((row) => {
|
||
const mappedRow: Record<string, any> = {};
|
||
columnMappings.forEach((mapping) => {
|
||
if (mapping.systemColumn) {
|
||
// 마스터-디테일 모드: 테이블.컬럼 형식에서 컬럼명만 추출
|
||
let colName = mapping.systemColumn;
|
||
if (isMasterDetail && colName.includes(".")) {
|
||
colName = colName.split(".")[1];
|
||
}
|
||
mappedRow[colName] = row[mapping.excelColumn];
|
||
}
|
||
});
|
||
return mappedRow;
|
||
});
|
||
|
||
// 빈 행 필터링: 모든 값이 비어있거나 undefined/null인 행 제외
|
||
const filteredData = mappedData.filter((row) => {
|
||
const values = Object.values(row);
|
||
return values.some((value) => {
|
||
if (value === undefined || value === null) return false;
|
||
if (typeof value === "string" && value.trim() === "") return false;
|
||
return true;
|
||
});
|
||
});
|
||
|
||
console.log(
|
||
`📊 엑셀 업로드: 전체 ${mappedData.length}행 중 유효한 ${filteredData.length}행`
|
||
);
|
||
|
||
// 🆕 마스터-디테일 간단 모드 처리 (마스터 필드 선택 + 채번)
|
||
if (isSimpleMasterDetailMode && screenId && masterDetailRelation) {
|
||
console.log("📊 마스터-디테일 간단 모드 업로드:", {
|
||
masterDetailRelation,
|
||
masterFieldValues,
|
||
numberingRuleId: masterDetailExcelConfig?.numberingRuleId,
|
||
});
|
||
|
||
const uploadResult = await DynamicFormApi.uploadMasterDetailSimple(
|
||
screenId,
|
||
filteredData,
|
||
masterFieldValues,
|
||
masterDetailExcelConfig?.numberingRuleId || undefined,
|
||
masterDetailExcelConfig?.afterUploadFlowId || undefined, // 하위 호환성
|
||
masterDetailExcelConfig?.afterUploadFlows || undefined // 다중 제어
|
||
);
|
||
|
||
if (uploadResult.success && uploadResult.data) {
|
||
const { masterInserted, detailInserted, generatedKey, errors } = uploadResult.data;
|
||
|
||
toast.success(
|
||
`마스터 ${masterInserted}건(${generatedKey || ""}), 디테일 ${detailInserted}건 처리되었습니다.` +
|
||
(errors?.length > 0 ? ` (오류: ${errors.length}건)` : "")
|
||
);
|
||
|
||
// 매핑 템플릿 저장
|
||
await saveMappingTemplateInternal();
|
||
|
||
onSuccess?.();
|
||
} else {
|
||
toast.error(uploadResult.message || "마스터-디테일 업로드에 실패했습니다.");
|
||
}
|
||
}
|
||
// 🆕 마스터-디테일 기존 모드 처리
|
||
else if (isMasterDetail && screenId && masterDetailRelation) {
|
||
console.log("📊 마스터-디테일 업로드 모드:", masterDetailRelation);
|
||
|
||
const uploadResult = await DynamicFormApi.uploadMasterDetailData(
|
||
screenId,
|
||
filteredData
|
||
);
|
||
|
||
if (uploadResult.success && uploadResult.data) {
|
||
const { masterInserted, masterUpdated, detailInserted, errors } = uploadResult.data;
|
||
|
||
toast.success(
|
||
`마스터 ${masterInserted + masterUpdated}건, 디테일 ${detailInserted}건 처리되었습니다.` +
|
||
(errors.length > 0 ? ` (오류: ${errors.length}건)` : "")
|
||
);
|
||
|
||
// 매핑 템플릿 저장
|
||
await saveMappingTemplateInternal();
|
||
|
||
onSuccess?.();
|
||
} else {
|
||
toast.error(uploadResult.message || "마스터-디테일 업로드에 실패했습니다.");
|
||
}
|
||
} else {
|
||
// 기존 단일 테이블 업로드 로직
|
||
let successCount = 0;
|
||
let failCount = 0;
|
||
|
||
// 단일 테이블 채번 설정 확인
|
||
const hasNumbering = numberingRuleId && numberingTargetColumn;
|
||
|
||
for (const row of filteredData) {
|
||
try {
|
||
let dataToSave = { ...row };
|
||
|
||
// 채번 적용: 각 행마다 채번 API 호출
|
||
if (hasNumbering && uploadMode === "insert") {
|
||
try {
|
||
const { apiClient } = await import("@/lib/api/client");
|
||
const numberingResponse = await apiClient.post(`/numbering-rules/${numberingRuleId}/allocate`);
|
||
const generatedCode = numberingResponse.data?.data?.generatedCode || numberingResponse.data?.data?.code;
|
||
if (numberingResponse.data?.success && generatedCode) {
|
||
dataToSave[numberingTargetColumn] = generatedCode;
|
||
}
|
||
} catch (numError) {
|
||
console.error("채번 오류:", numError);
|
||
}
|
||
}
|
||
|
||
if (uploadMode === "insert") {
|
||
const formData = { screenId: 0, tableName, data: dataToSave };
|
||
const result = await DynamicFormApi.saveFormData(formData);
|
||
if (result.success) {
|
||
successCount++;
|
||
} else {
|
||
failCount++;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
failCount++;
|
||
}
|
||
}
|
||
|
||
// 🆕 업로드 후 제어 실행
|
||
if (afterUploadFlows && afterUploadFlows.length > 0 && successCount > 0) {
|
||
console.log("🔄 업로드 후 제어 실행:", afterUploadFlows);
|
||
try {
|
||
const { apiClient } = await import("@/lib/api/client");
|
||
// 순서대로 실행
|
||
const sortedFlows = [...afterUploadFlows].sort((a, b) => a.order - b.order);
|
||
for (const flow of sortedFlows) {
|
||
await apiClient.post(`/dataflow/node-flows/${flow.flowId}/execute`, {
|
||
sourceData: { tableName, uploadedCount: successCount },
|
||
});
|
||
console.log(`✅ 제어 실행 완료: flowId=${flow.flowId}`);
|
||
}
|
||
} catch (controlError) {
|
||
console.error("제어 실행 오류:", controlError);
|
||
}
|
||
}
|
||
|
||
if (successCount > 0) {
|
||
toast.success(
|
||
`${successCount}개 행이 업로드되었습니다.${failCount > 0 ? ` (실패: ${failCount}개)` : ""}`
|
||
);
|
||
|
||
// 매핑 템플릿 저장
|
||
await saveMappingTemplateInternal();
|
||
|
||
onSuccess?.();
|
||
} else {
|
||
toast.error("업로드에 실패했습니다.");
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("❌ 엑셀 업로드 실패:", error);
|
||
toast.error("엑셀 업로드 중 오류가 발생했습니다.");
|
||
} finally {
|
||
setIsUploading(false);
|
||
}
|
||
};
|
||
|
||
// 매핑 템플릿 저장 헬퍼 함수
|
||
const saveMappingTemplateInternal = async () => {
|
||
try {
|
||
const mappingsToSave: Record<string, string | null> = {};
|
||
columnMappings.forEach((mapping) => {
|
||
mappingsToSave[mapping.excelColumn] = mapping.systemColumn;
|
||
});
|
||
|
||
console.log("💾 매핑 템플릿 저장 중...", {
|
||
tableName,
|
||
excelColumns,
|
||
mappingsToSave,
|
||
});
|
||
const saveResult = await saveMappingTemplate(
|
||
tableName,
|
||
excelColumns,
|
||
mappingsToSave
|
||
);
|
||
|
||
if (saveResult.success) {
|
||
console.log("✅ 매핑 템플릿 저장 완료:", saveResult.data);
|
||
} else {
|
||
console.warn("⚠️ 매핑 템플릿 저장 실패:", saveResult.error);
|
||
}
|
||
} catch (error) {
|
||
console.warn("⚠️ 매핑 템플릿 저장 중 오류:", error);
|
||
}
|
||
};
|
||
|
||
// 모달 닫기 시 초기화
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setCurrentStep(1);
|
||
setFile(null);
|
||
setSheetNames([]);
|
||
setSelectedSheet("");
|
||
setIsAutoMappingLoaded(false);
|
||
setDetectedRange("");
|
||
setAllData([]);
|
||
setDisplayData([]);
|
||
setExcelColumns([]);
|
||
setSystemColumns([]);
|
||
setColumnMappings([]);
|
||
// 🆕 마스터-디테일 모드 초기화
|
||
setMasterFieldValues({});
|
||
}
|
||
}, [open]);
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent
|
||
className="max-h-[95vh] max-w-[95vw] sm:max-w-[1200px]"
|
||
style={{
|
||
width: "1000px",
|
||
height: "700px",
|
||
minWidth: "700px",
|
||
minHeight: "500px",
|
||
maxWidth: "1400px",
|
||
maxHeight: "900px",
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
|
||
<FileSpreadsheet className="h-5 w-5" />
|
||
엑셀 데이터 업로드
|
||
{isMasterDetail && (
|
||
<span className="ml-2 rounded bg-blue-100 px-2 py-0.5 text-xs font-normal text-blue-700">
|
||
마스터-디테일
|
||
</span>
|
||
)}
|
||
</DialogTitle>
|
||
<DialogDescription className="text-xs sm:text-sm">
|
||
{isMasterDetail && masterDetailRelation ? (
|
||
<>
|
||
마스터({masterDetailRelation.masterTable}) + 디테일({masterDetailRelation.detailTable}) 구조입니다.
|
||
마스터 데이터는 중복 입력 시 병합됩니다.
|
||
</>
|
||
) : (
|
||
"엑셀 파일을 선택하고 컬럼을 매핑하여 데이터를 업로드하세요."
|
||
)}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{/* 스텝 인디케이터 (3단계) */}
|
||
<div className="flex items-center justify-between">
|
||
{[
|
||
{ num: 1, label: "파일 선택" },
|
||
{ num: 2, label: "컬럼 매핑" },
|
||
{ num: 3, label: "확인" },
|
||
].map((step, index) => (
|
||
<React.Fragment key={step.num}>
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div
|
||
className={cn(
|
||
"flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors sm:h-10 sm:w-10",
|
||
currentStep === step.num
|
||
? "bg-primary text-primary-foreground"
|
||
: currentStep > step.num
|
||
? "bg-success text-white"
|
||
: "bg-muted text-muted-foreground"
|
||
)}
|
||
>
|
||
{currentStep > step.num ? (
|
||
<CheckCircle2 className="h-4 w-4 sm:h-5 sm:w-5" />
|
||
) : (
|
||
step.num
|
||
)}
|
||
</div>
|
||
<span
|
||
className={cn(
|
||
"text-[10px] font-medium sm:text-xs",
|
||
currentStep === step.num ? "text-primary" : "text-muted-foreground"
|
||
)}
|
||
>
|
||
{step.label}
|
||
</span>
|
||
</div>
|
||
{index < 2 && (
|
||
<div
|
||
className={cn(
|
||
"h-0.5 flex-1 transition-colors",
|
||
currentStep > step.num ? "bg-success" : "bg-muted"
|
||
)}
|
||
/>
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
|
||
{/* 스텝별 컨텐츠 */}
|
||
<div className="max-h-[calc(95vh-200px)] space-y-4 overflow-y-auto">
|
||
{/* 1단계: 파일 선택 & 미리보기 (통합) */}
|
||
{currentStep === 1 && (
|
||
<div className="space-y-4">
|
||
{/* 🆕 마스터-디테일 간단 모드: 마스터 필드 입력 */}
|
||
{hasMasterSelectFields && (
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{masterDetailExcelConfig?.masterSelectFields?.map((field) => (
|
||
<div key={field.columnName} className="space-y-1">
|
||
<Label className="text-xs">
|
||
{field.columnLabel}
|
||
{field.required && <span className="ml-1 text-destructive">*</span>}
|
||
</Label>
|
||
{field.inputType === "entity" ? (
|
||
<Select
|
||
value={masterFieldValues[field.columnName]?.toString() || ""}
|
||
onValueChange={(value) =>
|
||
setMasterFieldValues((prev) => ({
|
||
...prev,
|
||
[field.columnName]: value,
|
||
}))
|
||
}
|
||
>
|
||
<SelectTrigger className="h-9 text-xs">
|
||
<SelectValue placeholder={`${field.columnLabel} 선택`} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{entitySearchLoading[field.columnName] ? (
|
||
<SelectItem value="loading" disabled>
|
||
로딩 중...
|
||
</SelectItem>
|
||
) : (
|
||
entitySearchData[field.columnName]?.map((item: any) => {
|
||
const keyValue = item[field.referenceColumn || "id"];
|
||
// displayColumn: 저장된 값 → DB에서 조회한 값 → referenceColumn → id
|
||
const displayColName =
|
||
field.displayColumn ||
|
||
entityDisplayColumns[field.columnName] ||
|
||
field.referenceColumn ||
|
||
"id";
|
||
const displayValue = item[displayColName] || keyValue;
|
||
return (
|
||
<SelectItem
|
||
key={keyValue}
|
||
value={keyValue?.toString()}
|
||
className="text-xs"
|
||
>
|
||
{displayValue}
|
||
</SelectItem>
|
||
);
|
||
})
|
||
)}
|
||
</SelectContent>
|
||
</Select>
|
||
) : field.inputType === "date" ? (
|
||
<input
|
||
type="date"
|
||
value={masterFieldValues[field.columnName] || ""}
|
||
onChange={(e) =>
|
||
setMasterFieldValues((prev) => ({
|
||
...prev,
|
||
[field.columnName]: e.target.value,
|
||
}))
|
||
}
|
||
className="h-9 w-full rounded-md border px-3 text-xs"
|
||
/>
|
||
) : (
|
||
<input
|
||
type="text"
|
||
value={masterFieldValues[field.columnName] || ""}
|
||
onChange={(e) =>
|
||
setMasterFieldValues((prev) => ({
|
||
...prev,
|
||
[field.columnName]: e.target.value,
|
||
}))
|
||
}
|
||
placeholder={field.columnLabel}
|
||
className="h-9 w-full rounded-md border px-3 text-xs"
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 파일 선택 영역 */}
|
||
<div>
|
||
<Label htmlFor="file-upload" className="text-xs sm:text-sm">
|
||
파일 선택 *
|
||
</Label>
|
||
<div
|
||
onDragOver={handleDragOver}
|
||
onDragLeave={handleDragLeave}
|
||
onDrop={handleDrop}
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className={cn(
|
||
"mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors",
|
||
isDragOver
|
||
? "border-primary bg-primary/5"
|
||
: file
|
||
? "border-green-500 bg-green-50"
|
||
: "border-muted-foreground/25 hover:border-primary hover:bg-muted/50"
|
||
)}
|
||
>
|
||
{file ? (
|
||
<div className="flex items-center gap-3">
|
||
<FileSpreadsheet className="h-8 w-8 text-green-600" />
|
||
<div>
|
||
<p className="text-sm font-medium text-green-700">{file.name}</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
클릭하여 다른 파일 선택
|
||
</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<Upload
|
||
className={cn(
|
||
"mb-2 h-8 w-8",
|
||
isDragOver ? "text-primary" : "text-muted-foreground"
|
||
)}
|
||
/>
|
||
<p
|
||
className={cn(
|
||
"text-sm font-medium",
|
||
isDragOver ? "text-primary" : "text-muted-foreground"
|
||
)}
|
||
>
|
||
{isDragOver
|
||
? "파일을 놓으세요"
|
||
: "파일을 드래그하거나 클릭하여 선택"}
|
||
</p>
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
지원 형식: .xlsx, .xls, .csv
|
||
</p>
|
||
</>
|
||
)}
|
||
<input
|
||
ref={fileInputRef}
|
||
id="file-upload"
|
||
type="file"
|
||
accept=".xlsx,.xls,.csv"
|
||
onChange={handleFileChange}
|
||
className="hidden"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 파일이 선택된 경우에만 미리보기 표시 */}
|
||
{file && displayData.length > 0 && (
|
||
<>
|
||
{/* 시트 선택 */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<Label className="text-xs text-muted-foreground sm:text-sm">
|
||
시트:
|
||
</Label>
|
||
<Select value={selectedSheet} onValueChange={handleSheetChange}>
|
||
<SelectTrigger className="h-8 w-[140px] text-xs sm:h-9 sm:w-[180px] sm:text-sm">
|
||
<SelectValue placeholder="Sheet1" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{sheetNames.map((sheetName) => (
|
||
<SelectItem
|
||
key={sheetName}
|
||
value={sheetName}
|
||
className="text-xs sm:text-sm"
|
||
>
|
||
{sheetName}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<span className="text-xs text-muted-foreground">
|
||
{displayData.length}개 행 · 셀을 클릭하여 편집, Tab/Enter로 이동
|
||
</span>
|
||
</div>
|
||
|
||
{/* 엑셀처럼 편집 가능한 스프레드시트 */}
|
||
<EditableSpreadsheet
|
||
columns={excelColumns}
|
||
data={displayData}
|
||
onColumnsChange={(newColumns) => {
|
||
setExcelColumns(newColumns);
|
||
// 범위 재계산
|
||
const lastCol =
|
||
newColumns.length > 0
|
||
? String.fromCharCode(64 + newColumns.length)
|
||
: "A";
|
||
setDetectedRange(`A1:${lastCol}${displayData.length + 1}`);
|
||
}}
|
||
onDataChange={(newData) => {
|
||
setDisplayData(newData);
|
||
setAllData(newData);
|
||
// 범위 재계산
|
||
const lastCol =
|
||
excelColumns.length > 0
|
||
? String.fromCharCode(64 + excelColumns.length)
|
||
: "A";
|
||
setDetectedRange(`A1:${lastCol}${newData.length + 1}`);
|
||
}}
|
||
maxHeight="320px"
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 2단계: 컬럼 매핑 */}
|
||
{currentStep === 2 && (
|
||
<div className="space-y-4">
|
||
{/* 상단: 제목 + 자동 매핑 버튼 */}
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-sm font-semibold sm:text-base">컬럼 매핑 설정</h3>
|
||
<Button
|
||
type="button"
|
||
variant="default"
|
||
size="sm"
|
||
onClick={handleAutoMapping}
|
||
className="h-8 text-xs sm:h-9 sm:text-sm"
|
||
>
|
||
<Zap className="mr-2 h-4 w-4" />
|
||
자동 매핑
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 매핑 리스트 */}
|
||
<div className="space-y-2">
|
||
<div className="grid grid-cols-[1fr_auto_1fr] gap-2 text-[10px] font-medium text-muted-foreground sm:text-xs">
|
||
<div>엑셀 컬럼</div>
|
||
<div></div>
|
||
<div>시스템 컬럼</div>
|
||
</div>
|
||
|
||
<div className="max-h-[350px] space-y-2 overflow-y-auto">
|
||
{columnMappings.map((mapping, index) => (
|
||
<div
|
||
key={index}
|
||
className="grid grid-cols-[1fr_auto_1fr] items-center gap-2"
|
||
>
|
||
<div className="rounded-md border border-border bg-muted px-3 py-2 text-xs font-medium sm:text-sm">
|
||
{mapping.excelColumn}
|
||
</div>
|
||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||
<Select
|
||
value={mapping.systemColumn || "none"}
|
||
onValueChange={(value) =>
|
||
handleMappingChange(
|
||
mapping.excelColumn,
|
||
value === "none" ? null : value
|
||
)
|
||
}
|
||
>
|
||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||
<SelectValue placeholder="매핑 안함">
|
||
{mapping.systemColumn
|
||
? (() => {
|
||
const col = systemColumns.find(
|
||
(c) => c.name === mapping.systemColumn
|
||
);
|
||
return col?.label || mapping.systemColumn;
|
||
})()
|
||
: "매핑 안함"}
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="none" className="text-xs sm:text-sm">
|
||
매핑 안함
|
||
</SelectItem>
|
||
{systemColumns.map((col) => (
|
||
<SelectItem
|
||
key={col.name}
|
||
value={col.name}
|
||
className="text-xs sm:text-sm"
|
||
>
|
||
{col.label || col.name} ({col.type})
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 매핑 자동 저장 안내 */}
|
||
{isAutoMappingLoaded ? (
|
||
<div className="rounded-md border border-success bg-success/10 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle2 className="mt-0.5 h-4 w-4 text-success" />
|
||
<div className="text-[10px] text-success sm:text-xs">
|
||
<p className="font-medium">이전 매핑이 자동 적용됨</p>
|
||
<p className="mt-1">
|
||
동일한 엑셀 구조가 감지되어 이전에 저장된 매핑이 적용되었습니다.
|
||
수정하면 업로드 시 자동 저장됩니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-md border border-muted bg-muted/30 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Zap className="mt-0.5 h-4 w-4 text-muted-foreground" />
|
||
<div className="text-[10px] text-muted-foreground sm:text-xs">
|
||
<p className="font-medium">새로운 엑셀 구조</p>
|
||
<p className="mt-1">
|
||
이 엑셀 구조는 처음입니다. 매핑을 설정하면 다음에 같은 구조의
|
||
엑셀에 자동 적용됩니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 3단계: 확인 */}
|
||
{currentStep === 3 && (
|
||
<div className="space-y-4">
|
||
<div className="rounded-md border border-border bg-muted/50 p-4">
|
||
<h3 className="text-sm font-medium sm:text-base">업로드 요약</h3>
|
||
<div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
|
||
<p>
|
||
<span className="font-medium">파일:</span> {file?.name}
|
||
</p>
|
||
<p>
|
||
<span className="font-medium">시트:</span> {selectedSheet}
|
||
</p>
|
||
<p>
|
||
<span className="font-medium">데이터 행:</span> {allData.length}개
|
||
</p>
|
||
<p>
|
||
<span className="font-medium">테이블:</span> {tableName}
|
||
</p>
|
||
<p>
|
||
<span className="font-medium">모드:</span>{" "}
|
||
{uploadMode === "insert"
|
||
? "신규 등록"
|
||
: uploadMode === "update"
|
||
? "업데이트"
|
||
: "Upsert"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-md border border-border bg-muted/50 p-4">
|
||
<h3 className="text-sm font-medium sm:text-base">컬럼 매핑</h3>
|
||
<div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
|
||
{columnMappings
|
||
.filter((m) => m.systemColumn)
|
||
.map((mapping, index) => {
|
||
const col = systemColumns.find(
|
||
(c) => c.name === mapping.systemColumn
|
||
);
|
||
return (
|
||
<p key={index}>
|
||
<span className="font-medium">{mapping.excelColumn}</span> →{" "}
|
||
{col?.label || mapping.systemColumn}
|
||
</p>
|
||
);
|
||
})}
|
||
{columnMappings.filter((m) => m.systemColumn).length === 0 && (
|
||
<p className="text-destructive">매핑된 컬럼이 없습니다.</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-md border border-warning bg-warning/10 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<AlertCircle className="mt-0.5 h-4 w-4 text-warning" />
|
||
<div className="text-[10px] text-warning sm:text-xs">
|
||
<p className="font-medium">주의사항</p>
|
||
<p className="mt-1">
|
||
업로드를 진행하면 데이터가 데이터베이스에 저장됩니다.
|
||
계속하시겠습니까?
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<DialogFooter className="gap-2 sm:gap-0">
|
||
<Button
|
||
variant="outline"
|
||
onClick={currentStep === 1 ? () => onOpenChange(false) : handlePrevious}
|
||
disabled={isUploading}
|
||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||
>
|
||
{currentStep === 1 ? "취소" : "이전"}
|
||
</Button>
|
||
{currentStep < 3 ? (
|
||
<Button
|
||
onClick={handleNext}
|
||
disabled={isUploading || (currentStep === 1 && !file)}
|
||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||
>
|
||
다음
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
onClick={handleUpload}
|
||
disabled={
|
||
isUploading || columnMappings.filter((m) => m.systemColumn).length === 0
|
||
}
|
||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||
>
|
||
{isUploading ? "업로드 중..." : "업로드"}
|
||
</Button>
|
||
)}
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|