summaryrefslogtreecommitdiff
path: root/lib
diff options
context:
space:
mode:
Diffstat (limited to 'lib')
-rw-r--r--lib/dolce/actions.ts384
-rw-r--r--lib/dolce/dialogs/b4-bulk-upload-dialog-v2.tsx625
-rw-r--r--lib/dolce/dialogs/b4-bulk-upload-dialog.tsx87
-rw-r--r--lib/dolce/table/detail-drawing-columns.tsx96
-rw-r--r--lib/dolce/table/drawing-list-columns.tsx7
-rw-r--r--lib/dolce/table/drawing-list-table-v2.tsx273
6 files changed, 1353 insertions, 119 deletions
diff --git a/lib/dolce/actions.ts b/lib/dolce/actions.ts
index 77de430f..552a9a6a 100644
--- a/lib/dolce/actions.ts
+++ b/lib/dolce/actions.ts
@@ -684,6 +684,390 @@ export async function uploadFilesToDetailDrawing(
}
/**
+ * B4 매핑 정보 일괄 저장 (MatchBatchFileDwgEdit)
+ */
+export interface B4MappingSaveItem {
+ CGbn: string | null;
+ Category: string | null;
+ CheckBox: string;
+ DGbn: string | null;
+ DegreeGbn: string | null;
+ DeptGbn: string | null;
+ Discipline: string | null;
+ DrawingKind: string;
+ DrawingMoveGbn: string | null;
+ DrawingName: string | null;
+ DrawingNo: string;
+ DrawingUsage: string | null;
+ FileNm: string;
+ JGbn: string | null;
+ Manager: string | null;
+ MappingYN: "Y" | "N";
+ NewOrNot: string | null;
+ ProjectNo: string;
+ RegisterGroup: number;
+ RegisterGroupId: number;
+ RegisterKindCode: string | null;
+ RegisterSerialNo: number;
+ RevNo: string | null;
+ SGbn: string | null;
+ UploadId: string;
+}
+
+export async function saveB4MappingBatch(
+ mappingSaveLists: B4MappingSaveItem[],
+ userId: string
+): Promise<number> {
+ try {
+ const response = await dolceApiCall<{
+ MatchBatchFileDwgEditResult: number;
+ }>("MatchBatchFileDwgEdit", {
+ mappingSaveLists,
+ UserID: userId,
+ });
+
+ return response.MatchBatchFileDwgEditResult;
+ } catch (error) {
+ console.error("B4 매핑 정보 저장 실패:", error);
+ throw error;
+ }
+}
+
+/**
+ * B4 파일명 파싱 (validateB4FileName과 동일한 로직)
+ * 형식: [버림] [문서번호토큰1] [문서번호토큰2] ... [리비전번호].[확장자]
+ * 예시: "testfile GTT DE 007 R01.pdf" → DrawingNo: "GTT-DE-007", RevNo: "R01"
+ */
+async function parseB4FileName(fileName: string): Promise<{
+ valid: boolean;
+ drawingNo?: string;
+ revNo?: string;
+ error?: string;
+}> {
+ try {
+ const lastDotIndex = fileName.lastIndexOf(".");
+ if (lastDotIndex === -1) {
+ return { valid: false, error: "파일 확장자가 없습니다" };
+ }
+
+ const nameWithoutExt = fileName.substring(0, lastDotIndex);
+ const parts = nameWithoutExt.split(" ").filter((p) => p.trim() !== "");
+
+ if (parts.length < 3) {
+ return {
+ valid: false,
+ error: `공백이 최소 2개 있어야 합니다 (현재: ${parts.length - 1}개)`,
+ };
+ }
+
+ const revNo = parts[parts.length - 1];
+ const drawingTokens = parts.slice(1, parts.length - 1);
+ const drawingNo = drawingTokens.join("-");
+
+ if (!drawingNo || !revNo) {
+ return { valid: false, error: "도면번호 또는 리비전번호가 비어있습니다" };
+ }
+
+ return { valid: true, drawingNo: drawingNo.trim(), revNo: revNo.trim() };
+ } catch (error) {
+ return {
+ valid: false,
+ error: error instanceof Error ? error.message : "알 수 없는 오류",
+ };
+ }
+}
+
+/**
+ * B4 파일 일괄 업로드 V2
+ *
+ * MatchBatchFileDwg/MatchBatchFileDwgEdit API 대신
+ * DetailDwgReceiptMgmtEdit API와 업로드 서비스만 사용
+ *
+ * 프로세스:
+ * 1. 파일명 파싱하여 DrawingNo, RevNo 추출
+ * 2. 기존 도면 정보 조회 (fetchDwgReceiptList)
+ * 3. 기존 상세도면 조회 (fetchDetailDwgReceiptList)
+ * 4. 없으면 ADD, 있으면 기존 UploadId 사용
+ * 5. 파일 업로드 (/api/dolce/upload-files)
+ */
+export async function bulkUploadB4FilesV2(
+ formData: FormData
+): Promise<B4BulkUploadResult> {
+ try {
+ console.log("[V2] B4 일괄 업로드 시작");
+
+ // FormData에서 메타데이터 추출
+ const projectNo = formData.get("projectNo") as string;
+ const userId = formData.get("userId") as string;
+ const userNm = formData.get("userNm") as string;
+ const email = formData.get("email") as string;
+ const vendorCode = formData.get("vendorCode") as string;
+ const registerKind = formData.get("registerKind") as string;
+ const fileCount = parseInt(formData.get("fileCount") as string);
+
+ if (!projectNo || !userId || !userNm || !email || !vendorCode || !registerKind || !fileCount) {
+ throw new Error("필수 파라미터가 누락되었습니다");
+ }
+
+ console.log(`[V2] 프로젝트: ${projectNo}, 사용자: ${userId}, 파일 수: ${fileCount}`);
+
+ const results: Array<{
+ drawingNo: string;
+ revNo: string;
+ fileName: string;
+ success: boolean;
+ error?: string;
+ }> = [];
+
+ let successCount = 0;
+ let failCount = 0;
+
+ // 1단계: 파일 수집 및 파싱
+ interface ParsedFile {
+ file: File;
+ drawingNo: string;
+ revNo: string;
+ fileName: string;
+ }
+
+ const parsedFiles: ParsedFile[] = [];
+
+ for (let i = 0; i < fileCount; i++) {
+ const file = formData.get(`file_${i}`) as File;
+ if (!file) continue;
+
+ const parseResult = await parseB4FileName(file.name);
+ if (!parseResult.valid || !parseResult.drawingNo || !parseResult.revNo) {
+ results.push({
+ drawingNo: "",
+ revNo: "",
+ fileName: file.name,
+ success: false,
+ error: parseResult.error || "파일명 파싱 실패",
+ });
+ failCount++;
+ continue;
+ }
+
+ parsedFiles.push({
+ file,
+ drawingNo: parseResult.drawingNo,
+ revNo: parseResult.revNo,
+ fileName: file.name,
+ });
+ }
+
+ console.log(`[V2] 파싱 완료: ${parsedFiles.length}개 성공, ${failCount}개 실패`);
+
+ // 2단계: DrawingNo별로 기본 도면 정보 조회
+ const drawingNoSet = new Set(parsedFiles.map((f) => f.drawingNo));
+ const drawingInfoMap = new Map<string, GttDwgReceiptItem>();
+
+ for (const drawingNo of drawingNoSet) {
+ try {
+ const dwgList = await fetchDwgReceiptList({
+ project: projectNo,
+ drawingKind: "B4",
+ drawingMoveGbn: "도면입수",
+ drawingNo: drawingNo,
+ });
+
+ const dwgInfo = dwgList.find(
+ (d) => (d as GttDwgReceiptItem).DrawingNo === drawingNo
+ ) as GttDwgReceiptItem | undefined;
+
+ if (dwgInfo) {
+ drawingInfoMap.set(drawingNo, dwgInfo);
+ console.log(`[V2] 도면 정보 조회 완료: ${drawingNo}`);
+ } else {
+ console.warn(`[V2] 도면 정보 없음: ${drawingNo}`);
+ }
+ } catch (error) {
+ console.error(`[V2] 도면 정보 조회 실패: ${drawingNo}`, error);
+ }
+ }
+
+ // 3단계: DrawingNo + RevNo로 그룹화
+ const uploadGroups = new Map<
+ string,
+ {
+ drawingNo: string;
+ revNo: string;
+ files: File[];
+ drawingInfo?: GttDwgReceiptItem;
+ }
+ >();
+
+ for (const parsed of parsedFiles) {
+ const groupKey = `${parsed.drawingNo}_${parsed.revNo}`;
+ if (!uploadGroups.has(groupKey)) {
+ uploadGroups.set(groupKey, {
+ drawingNo: parsed.drawingNo,
+ revNo: parsed.revNo,
+ files: [],
+ drawingInfo: drawingInfoMap.get(parsed.drawingNo),
+ });
+ }
+ uploadGroups.get(groupKey)!.files.push(parsed.file);
+ }
+
+ console.log(`[V2] ${uploadGroups.size}개 그룹으로 묶임`);
+
+ // 4단계: 각 그룹별로 처리
+ for (const [groupKey, group] of uploadGroups.entries()) {
+ const { drawingNo, revNo, files, drawingInfo } = group;
+
+ try {
+ console.log(`[V2] 그룹 처리 시작: ${groupKey} (${files.length}개 파일)`);
+
+ // 도면 정보가 없으면 실패
+ if (!drawingInfo) {
+ throw new Error(`도면 정보를 찾을 수 없습니다: ${drawingNo}`);
+ }
+
+ // 4-1. 기존 상세도면 조회
+ const detailDwgList = await fetchDetailDwgReceiptList({
+ project: projectNo,
+ drawingNo: drawingNo,
+ discipline: drawingInfo.Discipline,
+ drawingKind: "B4",
+ userId: userId,
+ });
+
+ console.log(`[V2] 기존 상세도면: ${detailDwgList.length}개`);
+
+ // 4-2. 해당 RevNo의 상세도면 찾기
+ const existingDetail = detailDwgList.find(
+ (d) => d.DrawingRevNo === revNo
+ );
+
+ let uploadId: string;
+
+ if (existingDetail) {
+ // 기존 상세도면이 있으면 해당 UploadId 사용
+ uploadId = existingDetail.UploadId;
+ console.log(`[V2] 기존 상세도면 사용: ${revNo}, UploadId: ${uploadId}`);
+ } else {
+ // 4-3. 없으면 새로 생성 (ADD)
+ uploadId = crypto.randomUUID();
+
+ // 기존 상세도면이 있으면 거기서 Category 가져오기, 없으면 기본값
+ const category = detailDwgList.length > 0 ? detailDwgList[0].Category : "NORM";
+ const registerDesc = "";
+
+ console.log(`[V2] 새 상세도면 생성: ${revNo}, UploadId: ${uploadId}`);
+
+ const addRequest: DetailDwgEditRequest = {
+ Mode: "ADD",
+ Status: "01",
+ RegisterId: 0,
+ ProjectNo: projectNo,
+ Discipline: drawingInfo.Discipline,
+ DrawingKind: "B4",
+ DrawingNo: drawingNo,
+ DrawingName: drawingInfo.DrawingName,
+ RegisterGroupId: drawingInfo.RegisterGroupId,
+ RegisterSerialNo: drawingInfo.RegisterGroup,
+ RegisterKind: registerKind,
+ DrawingRevNo: revNo,
+ Category: category,
+ Receiver: null,
+ Manager: drawingInfo.Manager || "970043",
+ RegisterDesc: registerDesc,
+ UploadId: uploadId,
+ RegCompanyCode: vendorCode,
+ };
+
+ await editDetailDwgReceipt({
+ dwgList: [addRequest],
+ userId: userId,
+ userNm: userNm,
+ vendorCode: vendorCode,
+ email: email,
+ });
+
+ console.log(`[V2] 상세도면 ADD 완료: ${groupKey}`);
+ }
+
+ // 4-4. 파일 업로드
+ console.log(`[V2] 파일 업로드 시작: ${files.length}개 파일`);
+
+ const uploadFormData = new FormData();
+ uploadFormData.append("uploadId", uploadId);
+ uploadFormData.append("userId", userId);
+ uploadFormData.append("fileCount", String(files.length));
+
+ files.forEach((file, index) => {
+ uploadFormData.append(`file_${index}`, file);
+ });
+
+ // Next.js API Route 호출 (프록시)
+ const uploadResponse = await fetch("/api/dolce/upload-files", {
+ method: "POST",
+ body: uploadFormData,
+ });
+
+ if (!uploadResponse.ok) {
+ const errorData = await uploadResponse.json();
+ throw new Error(errorData.error || `파일 업로드 실패: ${uploadResponse.status}`);
+ }
+
+ const uploadResult = await uploadResponse.json();
+
+ if (!uploadResult.success) {
+ throw new Error(uploadResult.error || "파일 업로드 실패");
+ }
+
+ console.log(`[V2] 파일 업로드 완료: ${groupKey}`);
+
+ // 성공 처리
+ for (const file of files) {
+ results.push({
+ drawingNo,
+ revNo,
+ fileName: file.name,
+ success: true,
+ });
+ successCount++;
+ }
+ } catch (error) {
+ // 실패 처리
+ const errorMessage =
+ error instanceof Error ? error.message : "알 수 없는 오류";
+
+ console.error(`[V2] 그룹 처리 실패: ${groupKey}`, error);
+
+ for (const file of group.files) {
+ results.push({
+ drawingNo: group.drawingNo,
+ revNo: group.revNo,
+ fileName: file.name,
+ success: false,
+ error: errorMessage,
+ });
+ failCount++;
+ }
+ }
+ }
+
+ console.log(`[V2] 일괄 업로드 완료: 성공 ${successCount}, 실패 ${failCount}`);
+
+ return {
+ success: successCount > 0,
+ successCount,
+ failCount,
+ results,
+ };
+ } catch (error) {
+ console.error("[V2] 일괄 업로드 실패:", error);
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : "알 수 없는 오류",
+ };
+ }
+}
+
+/**
* B4 파일 일괄 업로드
* 주의: formData를 사용하여 대용량 파일 처리
*/
diff --git a/lib/dolce/dialogs/b4-bulk-upload-dialog-v2.tsx b/lib/dolce/dialogs/b4-bulk-upload-dialog-v2.tsx
new file mode 100644
index 00000000..3207c00b
--- /dev/null
+++ b/lib/dolce/dialogs/b4-bulk-upload-dialog-v2.tsx
@@ -0,0 +1,625 @@
+"use client";
+
+import * as React from "react";
+import { useState } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} 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 { FolderOpen, Loader2, ChevronRight, ChevronLeft, CheckCircle2 } from "lucide-react";
+import { toast } from "sonner";
+import { Progress } from "@/components/ui/progress";
+import { useTranslation } from "@/i18n/client";
+import {
+ validateB4FileName,
+ B4UploadValidationDialog,
+ type FileValidationResult,
+} from "./b4-upload-validation-dialog";
+import {
+ fetchDwgReceiptList,
+ bulkUploadB4FilesV2,
+ type B4BulkUploadResult,
+ type GttDwgReceiptItem,
+} from "../actions";
+
+interface B4BulkUploadDialogV2Props {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ projectNo: string;
+ userId: string;
+ userName: string;
+ userEmail: string;
+ vendorCode: string;
+ onUploadComplete?: () => void;
+ lng: string;
+}
+
+type UploadStep = "settings" | "files" | "validation" | "uploading" | "complete";
+
+export function B4BulkUploadDialogV2({
+ open,
+ onOpenChange,
+ projectNo,
+ userId,
+ userName,
+ userEmail,
+ vendorCode,
+ onUploadComplete,
+ lng,
+}: B4BulkUploadDialogV2Props) {
+ const { t } = useTranslation(lng, "dolce");
+ const [currentStep, setCurrentStep] = useState<UploadStep>("settings");
+ const [drawingUsage, setDrawingUsage] = useState<string>("REC");
+ const [registerKind, setRegisterKind] = useState<string>("");
+ const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+ const [isUploading, setIsUploading] = useState(false);
+ const [validationResults, setValidationResults] = useState<FileValidationResult[]>([]);
+ const [showValidationDialog, setShowValidationDialog] = useState(false);
+ const [isDragging, setIsDragging] = useState(false);
+ const [uploadProgress, setUploadProgress] = useState(0);
+ const [uploadResult, setUploadResult] = useState<B4BulkUploadResult | null>(null);
+
+ // B4 GTT 옵션
+ const drawingUsageOptions = [
+ { value: "REC", label: t("bulkUpload.drawingUsageReceive") },
+ ];
+
+ const registerKindOptionsMap: Record<string, Array<{ value: string; label: string }>> = {
+ REC: [
+ { value: "RECP", label: t("bulkUpload.registerKindRecP") },
+ { value: "RECW", label: t("bulkUpload.registerKindRecW") },
+ ],
+ };
+
+ // 다이얼로그 닫을 때 초기화
+ React.useEffect(() => {
+ if (!open) {
+ setCurrentStep("settings");
+ setDrawingUsage("REC");
+ setRegisterKind("");
+ setSelectedFiles([]);
+ setValidationResults([]);
+ setShowValidationDialog(false);
+ setIsDragging(false);
+ setUploadProgress(0);
+ setUploadResult(null);
+ }
+ }, [open]);
+
+ // 파일 선택 핸들러
+ const handleFilesChange = (files: File[]) => {
+ if (files.length === 0) return;
+
+ // 중복 제거
+ const existingNames = new Set(selectedFiles.map((f) => f.name));
+ const newFiles = files.filter((f) => !existingNames.has(f.name));
+
+ if (newFiles.length === 0) {
+ toast.error(t("bulkUpload.duplicateFileError"));
+ return;
+ }
+
+ setSelectedFiles((prev) => [...prev, ...newFiles]);
+ toast.success(t("bulkUpload.filesSelectedSuccess", { count: newFiles.length }));
+ };
+
+ // Drag & Drop 핸들러
+ const handleDragEnter = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsDragging(true);
+ };
+
+ const handleDragLeave = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (e.currentTarget === e.target) {
+ setIsDragging(false);
+ }
+ };
+
+ const handleDragOver = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ e.dataTransfer.dropEffect = "copy";
+ };
+
+ const handleDrop = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsDragging(false);
+
+ const droppedFiles = Array.from(e.dataTransfer.files);
+ if (droppedFiles.length > 0) {
+ handleFilesChange(droppedFiles);
+ }
+ };
+
+ // 파일 제거
+ const handleRemoveFile = (index: number) => {
+ setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
+ };
+
+ // 1단계 완료 (설정)
+ const handleSettingsNext = () => {
+ if (!registerKind) {
+ toast.error(t("bulkUpload.selectRegisterKindError"));
+ return;
+ }
+ setCurrentStep("files");
+ };
+
+ // 2단계 완료 (파일 선택)
+ const handleFilesNext = () => {
+ if (selectedFiles.length === 0) {
+ toast.error(t("bulkUpload.selectFilesError"));
+ return;
+ }
+ setCurrentStep("validation");
+ handleValidate();
+ };
+
+ // 검증 시작 (V2: fetchDwgReceiptList 사용)
+ const handleValidate = async () => {
+ try {
+ console.log("[V2 Dialog] 검증 시작");
+
+ // 1단계: 파일명 파싱
+ const parseResults: FileValidationResult[] = selectedFiles.map((file) => {
+ const validation = validateB4FileName(file.name);
+ return {
+ file,
+ valid: validation.valid,
+ parsed: validation.parsed,
+ error: validation.error,
+ };
+ });
+
+ const parsedFiles = parseResults.filter((r) => r.valid && r.parsed);
+ if (parsedFiles.length === 0) {
+ setValidationResults(parseResults);
+ setShowValidationDialog(true);
+ return;
+ }
+
+ // 2단계: DrawingNo별로 도면 정보 조회
+ const drawingNoSet = new Set(parsedFiles.map((r) => r.parsed!.drawingNo));
+ const drawingInfoMap = new Map<string, GttDwgReceiptItem>();
+
+ console.log(`[V2 Dialog] ${drawingNoSet.size}개 도면번호 조회`);
+
+ for (const drawingNo of drawingNoSet) {
+ try {
+ const dwgList = await fetchDwgReceiptList({
+ project: projectNo,
+ drawingKind: "B4",
+ drawingMoveGbn: "도면입수",
+ drawingNo: drawingNo,
+ });
+
+ // 해당 DrawingNo 찾기
+ const dwgInfo = dwgList.find(
+ (d) => (d as GttDwgReceiptItem).DrawingNo === drawingNo
+ ) as GttDwgReceiptItem | undefined;
+
+ if (dwgInfo) {
+ drawingInfoMap.set(drawingNo, dwgInfo);
+ console.log(`[V2 Dialog] 도면 정보 조회 완료: ${drawingNo}`);
+ } else {
+ console.log(`[V2 Dialog] 도면 정보 없음: ${drawingNo}`);
+ }
+ } catch (error) {
+ console.error(`[V2 Dialog] 도면 정보 조회 실패: ${drawingNo}`, error);
+ }
+ }
+
+ // 3단계: 검증 결과 병합
+ const finalResults: FileValidationResult[] = parseResults.map((parseResult) => {
+ if (!parseResult.valid || !parseResult.parsed) {
+ return parseResult;
+ }
+
+ const drawingInfo = drawingInfoMap.get(parseResult.parsed.drawingNo);
+
+ if (!drawingInfo) {
+ return {
+ ...parseResult,
+ mappingStatus: "not_found" as const,
+ error: t("validation.notRegistered"),
+ };
+ }
+
+ // DrawingMoveGbn이 "도면입수"가 아니면 업로드 불가
+ if (drawingInfo.DrawingMoveGbn !== "도면입수") {
+ return {
+ ...parseResult,
+ mappingStatus: "not_found" as const,
+ error: t("validation.notGttDeliverables"),
+ };
+ }
+
+ // 업로드 가능
+ return {
+ ...parseResult,
+ mappingStatus: "available" as const,
+ drawingName: drawingInfo.DrawingName || undefined,
+ registerGroupId: drawingInfo.RegisterGroupId,
+ };
+ });
+
+ console.log("[V2 Dialog] 검증 완료");
+ setValidationResults(finalResults);
+ setShowValidationDialog(true);
+ } catch (error) {
+ console.error("[V2 Dialog] 검증 실패:", error);
+ toast.error(
+ error instanceof Error ? error.message : t("bulkUpload.validationError")
+ );
+ }
+ };
+
+ // 업로드 확인 (V2: bulkUploadB4FilesV2 사용)
+ const handleConfirmUpload = async (validFiles: FileValidationResult[]) => {
+ setIsUploading(true);
+ setCurrentStep("uploading");
+ setShowValidationDialog(false);
+
+ try {
+ console.log(`[V2 Dialog] 업로드 시작: ${validFiles.length}개 파일`);
+
+ // FormData 구성
+ const formData = new FormData();
+ formData.append("projectNo", projectNo);
+ formData.append("userId", userId);
+ formData.append("userNm", userName);
+ formData.append("email", userEmail);
+ formData.append("vendorCode", vendorCode);
+ formData.append("registerKind", registerKind);
+ formData.append("fileCount", String(validFiles.length));
+
+ validFiles.forEach((fileResult, index) => {
+ formData.append(`file_${index}`, fileResult.file);
+ });
+
+ // 업로드 프로그레스 시뮬레이션
+ const progressInterval = setInterval(() => {
+ setUploadProgress((prev) => {
+ if (prev >= 90) return 90;
+ return prev + 10;
+ });
+ }, 500);
+
+ // V2 함수 호출
+ const result = await bulkUploadB4FilesV2(formData);
+
+ clearInterval(progressInterval);
+ setUploadProgress(100);
+
+ console.log("[V2 Dialog] 업로드 완료:", result);
+
+ setUploadResult(result);
+ setCurrentStep("complete");
+
+ if (result.success) {
+ toast.success(
+ t("bulkUpload.uploadSuccessToast", {
+ successCount: result.successCount,
+ total: validFiles.length,
+ })
+ );
+ } else {
+ toast.error(result.error || t("bulkUpload.uploadError"));
+ }
+ } catch (error) {
+ console.error("[V2 Dialog] 업로드 실패:", error);
+ toast.error(
+ error instanceof Error ? error.message : t("bulkUpload.uploadError")
+ );
+ setCurrentStep("files");
+ } finally {
+ setIsUploading(false);
+ }
+ };
+
+ const registerKindOptions = drawingUsage
+ ? registerKindOptionsMap[drawingUsage] || []
+ : [];
+
+ const handleDrawingUsageChange = (value: string) => {
+ setDrawingUsage(value);
+ setRegisterKind("");
+ };
+
+ return (
+ <>
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="max-w-2xl">
+ <DialogHeader>
+ <DialogTitle>{t("bulkUpload.title")} (V2)</DialogTitle>
+ <DialogDescription>
+ {currentStep === "settings" && t("bulkUpload.stepSettings")}
+ {currentStep === "files" && t("bulkUpload.stepFiles")}
+ {currentStep === "validation" && t("bulkUpload.stepValidation")}
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ {/* 1단계: 설정 입력 */}
+ {currentStep === "settings" && (
+ <>
+ {/* 도면용도 선택 */}
+ <div className="space-y-2">
+ <Label>{t("bulkUpload.drawingUsage")} *</Label>
+ <Select value={drawingUsage} onValueChange={handleDrawingUsageChange}>
+ <SelectTrigger>
+ <SelectValue placeholder={t("bulkUpload.drawingUsagePlaceholder")} />
+ </SelectTrigger>
+ <SelectContent>
+ {drawingUsageOptions.map((option) => (
+ <SelectItem key={option.value} value={option.value}>
+ {option.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </div>
+
+ {/* 등록종류 선택 */}
+ <div className="space-y-2">
+ <Label>{t("bulkUpload.registerKind")} *</Label>
+ <Select
+ value={registerKind}
+ onValueChange={setRegisterKind}
+ disabled={!drawingUsage}
+ >
+ <SelectTrigger>
+ <SelectValue placeholder={t("bulkUpload.registerKindPlaceholder")} />
+ </SelectTrigger>
+ <SelectContent>
+ {registerKindOptions.map((option) => (
+ <SelectItem key={option.value} value={option.value}>
+ {option.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <p className="text-sm text-muted-foreground">
+ {t("bulkUpload.registerKindNote")}
+ </p>
+ </div>
+ </>
+ )}
+
+ {/* 2단계: 파일 선택 */}
+ {currentStep === "files" && (
+ <>
+ {/* 파일 선택 영역 */}
+ <div
+ className={`border-2 border-dashed rounded-lg p-8 transition-all duration-200 ${
+ isDragging
+ ? "border-primary bg-primary/5 scale-[1.02]"
+ : "border-muted-foreground/30 hover:border-muted-foreground/50"
+ }`}
+ onDragEnter={handleDragEnter}
+ onDragLeave={handleDragLeave}
+ onDragOver={handleDragOver}
+ onDrop={handleDrop}
+ >
+ <input
+ type="file"
+ multiple
+ accept=".pdf,.doc,.docx,.xls,.xlsx,.dwg,.dxf,.zip"
+ onChange={(e) => handleFilesChange(Array.from(e.target.files || []))}
+ className="hidden"
+ id="b4-file-upload-v2"
+ />
+ <label
+ htmlFor="b4-file-upload-v2"
+ className="flex flex-col items-center justify-center cursor-pointer"
+ >
+ <FolderOpen
+ className={`h-12 w-12 mb-3 transition-colors ${
+ isDragging ? "text-primary" : "text-muted-foreground"
+ }`}
+ />
+ <p
+ className={`text-sm transition-colors ${
+ isDragging
+ ? "text-primary font-medium"
+ : "text-muted-foreground"
+ }`}
+ >
+ {isDragging
+ ? t("bulkUpload.fileDropHere")
+ : t("bulkUpload.fileSelectArea")}
+ </p>
+ <p className="text-xs text-muted-foreground mt-1">
+ {t("bulkUpload.fileTypes")}
+ </p>
+ </label>
+ </div>
+
+ {/* 선택된 파일 목록 */}
+ {selectedFiles.length > 0 && (
+ <div className="border rounded-lg p-4">
+ <div className="flex items-center justify-between mb-3">
+ <h4 className="text-sm font-medium">
+ {t("bulkUpload.selectedFiles", { count: selectedFiles.length })}
+ </h4>
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={() => setSelectedFiles([])}
+ >
+ {t("bulkUpload.removeAll")}
+ </Button>
+ </div>
+ <div className="max-h-60 overflow-y-auto space-y-2">
+ {selectedFiles.map((file, index) => (
+ <div
+ key={index}
+ className="flex items-center justify-between p-2 rounded bg-muted/50"
+ >
+ <div className="flex-1 min-w-0">
+ <p className="text-sm truncate">{file.name}</p>
+ <p className="text-xs text-muted-foreground">
+ {(file.size / 1024 / 1024).toFixed(2)} MB
+ </p>
+ </div>
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={() => handleRemoveFile(index)}
+ >
+ {t("bulkUpload.removeFile")}
+ </Button>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+ </>
+ )}
+
+ {/* 3단계: 검증 중 표시 */}
+ {currentStep === "validation" && (
+ <div className="flex flex-col items-center justify-center py-12">
+ <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+ <p className="text-sm text-muted-foreground">
+ {t("bulkUpload.validating")}
+ </p>
+ </div>
+ )}
+
+ {/* 4단계: 업로드 진행 중 */}
+ {currentStep === "uploading" && (
+ <div className="space-y-6 py-8">
+ <div className="flex flex-col items-center">
+ <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+ <h3 className="text-lg font-semibold mb-2">{t("bulkUpload.uploading")}</h3>
+ <p className="text-sm text-muted-foreground">
+ {t("bulkUpload.uploadingWait")}
+ </p>
+ </div>
+ <div className="space-y-2">
+ <div className="flex justify-between text-sm">
+ <span>{t("bulkUpload.uploadProgress")}</span>
+ <span>{uploadProgress}%</span>
+ </div>
+ <Progress value={uploadProgress} className="h-2" />
+ {uploadProgress >= 90 && uploadProgress < 100 && (
+ <p className="text-xs text-muted-foreground text-center pt-2">
+ {t("bulkUpload.uploadingToServer")}
+ </p>
+ )}
+ </div>
+ </div>
+ )}
+
+ {/* 5단계: 업로드 완료 */}
+ {currentStep === "complete" && uploadResult && (
+ <div className="space-y-6 py-8">
+ <div className="flex flex-col items-center">
+ <CheckCircle2 className="h-16 w-16 text-green-500 mb-4" />
+ <h3 className="text-lg font-semibold mb-2">{t("bulkUpload.uploadComplete")}</h3>
+ <p className="text-sm text-muted-foreground">
+ {t("bulkUpload.uploadSuccessMessage", { count: uploadResult.successCount })}
+ </p>
+ </div>
+
+ {uploadResult.failCount && uploadResult.failCount > 0 && (
+ <div className="bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+ <p className="text-sm text-yellow-800 dark:text-yellow-200">
+ {t("bulkUpload.uploadFailMessage", { count: uploadResult.failCount })}
+ </p>
+ </div>
+ )}
+
+ <div className="flex justify-center">
+ <Button
+ onClick={() => {
+ onOpenChange(false);
+ onUploadComplete?.();
+ }}
+ >
+ {t("bulkUpload.confirmButton")}
+ </Button>
+ </div>
+ </div>
+ )}
+ </div>
+
+ {/* 푸터 버튼 */}
+ {currentStep !== "uploading" && currentStep !== "complete" && currentStep !== "validation" && (
+ <DialogFooter>
+ {currentStep === "settings" && (
+ <>
+ <Button
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ >
+ {t("bulkUpload.cancelButton")}
+ </Button>
+ <Button
+ onClick={handleSettingsNext}
+ disabled={!registerKind}
+ >
+ {t("bulkUpload.nextButton")}
+ <ChevronRight className="ml-2 h-4 w-4" />
+ </Button>
+ </>
+ )}
+
+ {currentStep === "files" && (
+ <>
+ <Button
+ variant="outline"
+ onClick={() => setCurrentStep("settings")}
+ >
+ <ChevronLeft className="mr-2 h-4 w-4" />
+ {t("bulkUpload.previousButton")}
+ </Button>
+ <Button
+ onClick={handleFilesNext}
+ disabled={selectedFiles.length === 0}
+ >
+ {t("bulkUpload.validateButton")}
+ <ChevronRight className="ml-2 h-4 w-4" />
+ </Button>
+ </>
+ )}
+ </DialogFooter>
+ )}
+ </DialogContent>
+ </Dialog>
+
+ {/* 검증 다이얼로그 */}
+ <B4UploadValidationDialog
+ open={showValidationDialog}
+ onOpenChange={(open) => {
+ setShowValidationDialog(open);
+ if (!open) {
+ onOpenChange(false);
+ }
+ }}
+ validationResults={validationResults}
+ onConfirmUpload={handleConfirmUpload}
+ isUploading={isUploading}
+ />
+ </>
+ );
+}
+
diff --git a/lib/dolce/dialogs/b4-bulk-upload-dialog.tsx b/lib/dolce/dialogs/b4-bulk-upload-dialog.tsx
index 1be7f226..21647e63 100644
--- a/lib/dolce/dialogs/b4-bulk-upload-dialog.tsx
+++ b/lib/dolce/dialogs/b4-bulk-upload-dialog.tsx
@@ -30,9 +30,10 @@ import {
} from "./b4-upload-validation-dialog";
import {
checkB4MappingStatus,
- editDetailDwgReceipt,
+ saveB4MappingBatch,
type MappingCheckItem,
type B4BulkUploadResult,
+ type B4MappingSaveItem,
} from "../actions";
import { v4 as uuidv4 } from "uuid";
@@ -343,37 +344,54 @@ export function B4BulkUploadDialog({
console.log(`[B4 업로드] 그룹 ${groupKey} 파일 업로드 완료`);
- // 3. 상세도면 등록
- await editDetailDwgReceipt({
- dwgList: [
- {
- Mode: "ADD",
- Status: "Draft",
- RegisterId: 0,
- ProjectNo: projectNo,
- Discipline: "",
- DrawingKind: "B4",
- DrawingNo: drawingNo,
- DrawingName: "",
- RegisterGroupId: registerGroupId,
- RegisterSerialNo: 0,
- RegisterKind: registerKind,
- DrawingRevNo: revNo,
- Category: "TS",
- Receiver: null,
- Manager: "",
- RegisterDesc: "",
- UploadId: uploadId,
- RegCompanyCode: vendorCode,
- },
- ],
- userId,
- userNm: userName,
- vendorCode,
- email: userEmail,
- });
+ // 3. 매핑 현황 재조회 (MatchBatchFileDwg)
+ const mappingCheckResults = await checkB4MappingStatus(projectNo, [
+ {
+ DrawingNo: drawingNo,
+ RevNo: revNo,
+ FileNm: files[0].fileName,
+ },
+ ]);
+
+ const mappingData = mappingCheckResults[0];
+ if (!mappingData || mappingData.RegisterGroupId === 0) {
+ throw new Error(`매핑 정보를 찾을 수 없습니다: ${groupKey}`);
+ }
+
+ console.log(`[B4 업로드] 그룹 ${groupKey} 매핑 정보 조회 완료`);
+
+ // 4. 매핑 정보 저장 (MatchBatchFileDwgEdit)
+ const mappingSaveItem: B4MappingSaveItem = {
+ CGbn: mappingData.CGbn,
+ Category: mappingData.Category,
+ CheckBox: "0",
+ DGbn: mappingData.DGbn,
+ DegreeGbn: mappingData.DegreeGbn,
+ DeptGbn: mappingData.DeptGbn,
+ Discipline: mappingData.Discipline,
+ DrawingKind: "B4",
+ DrawingMoveGbn: "도면입수",
+ DrawingName: mappingData.DrawingName,
+ DrawingNo: drawingNo,
+ DrawingUsage: "입수용",
+ FileNm: files[0].fileName,
+ JGbn: mappingData.JGbn,
+ Manager: mappingData.Manager || "970043",
+ MappingYN: "Y",
+ NewOrNot: "N",
+ ProjectNo: projectNo,
+ RegisterGroup: 0,
+ RegisterGroupId: registerGroupId,
+ RegisterKindCode: registerKind,
+ RegisterSerialNo: mappingData.RegisterSerialNo,
+ RevNo: revNo,
+ SGbn: mappingData.SGbn,
+ UploadId: uploadId,
+ };
+
+ await saveB4MappingBatch([mappingSaveItem], userId);
- console.log(`[B4 업로드] 그룹 ${groupKey} 상세도면 등록 완료`);
+ console.log(`[B4 업로드] 그룹 ${groupKey} 매핑 정보 저장 완료`);
successCount += files.length;
} catch (error) {
@@ -685,7 +703,12 @@ export function B4BulkUploadDialog({
{/* 검증 다이얼로그 */}
<B4UploadValidationDialog
open={showValidationDialog}
- onOpenChange={setShowValidationDialog}
+ onOpenChange={(open) => {
+ setShowValidationDialog(open);
+ if (!open) {
+ onOpenChange(false); // 검증 다이얼로그가 닫히면 메인 다이얼로그도 닫기
+ }
+ }}
validationResults={validationResults}
onConfirmUpload={handleConfirmUpload}
isUploading={isUploading}
diff --git a/lib/dolce/table/detail-drawing-columns.tsx b/lib/dolce/table/detail-drawing-columns.tsx
index 77d25953..c082333d 100644
--- a/lib/dolce/table/detail-drawing-columns.tsx
+++ b/lib/dolce/table/detail-drawing-columns.tsx
@@ -8,8 +8,8 @@ import { formatDolceDateTime } from "../utils/date-formatter";
const DRAWING_USAGE_MAP: Record<string, { ko: string; en: string }> = {
APP: { ko: "승인용", en: "Approval" },
WOR: { ko: "작업용", en: "Working" },
- REC: { ko: "입수용 / GTT→SHI", en: "GTT→SHI" },
- SUB: { ko: "제출용 / SHI→GTT", en: "SHI→GTT" },
+ REC: { ko: "입수용", en: "GTT→SHI" },
+ SUB: { ko: "제출용", en: "SHI→GTT" },
};
const REGISTER_KIND_MAP: Record<string, { ko: string; en: string }> = {
@@ -36,82 +36,6 @@ const translateRegisterKind = (code: string | null, lng: string): string => {
return lng === "en" ? mapped.en : mapped.ko;
};
-// 기본 컬럼 (기존 호환성 유지)
-export const detailDrawingColumns: ColumnDef<DetailDwgReceiptItem>[] = [
- {
- accessorKey: "RegisterSerialNo",
- header: "일련번호",
- minSize: 80,
- cell: ({ row }) => {
- return <div className="text-center">{row.getValue("RegisterSerialNo")}</div>;
- },
- },
- {
- accessorKey: "DrawingRevNo",
- header: "Revision",
- minSize: 100,
- cell: ({ row }) => {
- return <div className="font-medium">{row.getValue("DrawingRevNo")}</div>;
- },
- },
- {
- accessorKey: "Status",
- header: "상태",
- minSize: 120,
- cell: ({ row }) => {
- return <div className="text-center">{row.getValue("Status")}</div>;
- },
- },
- {
- accessorKey: "CategoryENM",
- header: "카테고리",
- minSize: 120,
- cell: ({ row }) => {
- const categoryENM = row.getValue("CategoryENM") as string;
- const categoryNM = row.original.CategoryNM;
- return <div>{categoryENM || categoryNM}</div>;
- },
- },
- {
- accessorKey: "DrawingUsageENM",
- header: "도면용도",
- minSize: 100,
- cell: ({ row }) => {
- const usageENM = row.getValue("DrawingUsageENM") as string | null;
- const usageNM = row.original.DrawingUsageNM;
- return <div>{usageENM || usageNM}</div>;
- },
- },
- {
- accessorKey: "RegisterKindENM",
- header: "등록종류",
- minSize: 180,
- cell: ({ row }) => {
- const kindENM = row.getValue("RegisterKindENM") as string | null;
- const kindNM = row.original.RegisterKindNM;
- return <div>{kindENM || kindNM}</div>;
- },
- },
- {
- accessorKey: "CreateUserNM",
- header: "생성자",
- minSize: 150,
- cell: ({ row }) => {
- const userENM = row.original.CreateUserENM;
- const userNM = row.getValue("CreateUserNM") as string;
- return <div>{userENM || userNM}</div>;
- },
- },
- {
- accessorKey: "CreateDt",
- header: "생성일시",
- minSize: 200,
- cell: ({ row }) => {
- return <div className="text-sm text-muted-foreground">{row.getValue("CreateDt")}</div>;
- },
- },
-];
-
// 다국어 지원 컬럼 생성 함수
export function createDetailDrawingColumns(
lng: string,
@@ -155,25 +79,25 @@ export function createDetailDrawingColumns(
},
},
{
- accessorKey: "DrawingUsageENM",
+ accessorKey: "DrawingUsage",
header: t("detailDrawing.columns.drawingUsage"),
minSize: 100,
cell: ({ row }) => {
- // API의 ENM이 제대로 번역되지 않아 코드 값으로 직접 변환
- const usageCode = row.getValue("DrawingUsageENM") as string | null;
+ // API 응답의 DrawingUsage는 코드값이므로 직접 매핑하여 번역
+ const usageCode = row.getValue("DrawingUsage") as string;
const translated = translateDrawingUsage(usageCode, lng);
- return <div>{translated || usageCode || row.original.DrawingUsageNM}</div>;
+ return <div>{translated}</div>;
},
},
{
- accessorKey: "RegisterKindENM",
+ accessorKey: "RegisterKind",
header: t("detailDrawing.columns.registerKind"),
minSize: 180,
cell: ({ row }) => {
- // API의 ENM이 제대로 번역되지 않아 코드 값으로 직접 변환
- const kindCode = row.getValue("RegisterKindENM") as string | null;
+ // API 응답의 RegisterKind는 코드값이므로 직접 매핑하여 번역
+ const kindCode = row.getValue("RegisterKind") as string;
const translated = translateRegisterKind(kindCode, lng);
- return <div>{translated || kindCode || row.original.RegisterKindNM}</div>;
+ return <div>{translated}</div>;
},
},
{
diff --git a/lib/dolce/table/drawing-list-columns.tsx b/lib/dolce/table/drawing-list-columns.tsx
index 58631084..34055eff 100644
--- a/lib/dolce/table/drawing-list-columns.tsx
+++ b/lib/dolce/table/drawing-list-columns.tsx
@@ -15,6 +15,11 @@ export function drawingListColumns(lng: string, t: any): ColumnDef<DwgReceiptIte
},
},
{
+ accessorKey: "RegisterGroupId",
+ header: "RegisterGroupId",
+ minSize: 150,
+ },
+ {
accessorKey: "DrawingName",
header: t("drawingList.columns.drawingName"),
minSize: 600,
@@ -25,7 +30,7 @@ export function drawingListColumns(lng: string, t: any): ColumnDef<DwgReceiptIte
{
accessorKey: "Discipline",
header: t("drawingList.columns.discipline"),
- minSize: 80,
+ minSize: 120,
},
{
accessorKey: "Manager",
diff --git a/lib/dolce/table/drawing-list-table-v2.tsx b/lib/dolce/table/drawing-list-table-v2.tsx
new file mode 100644
index 00000000..2ee80f11
--- /dev/null
+++ b/lib/dolce/table/drawing-list-table-v2.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+ getSortedRowModel,
+ SortingState,
+ getPaginationRowModel,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { ArrowUpDown, ArrowUp, ArrowDown, ChevronLeft, ChevronRight } from "lucide-react";
+
+// 도면 데이터의 기본 인터페이스
+interface DrawingData {
+ RegisterGroupId?: string | null;
+ DrawingNo?: string | null;
+ Discipline?: string | null;
+ CreateDt?: string | Date | null;
+}
+
+interface DrawingListTableV2Props<TData extends DrawingData, TValue> {
+ columns: ColumnDef<TData, TValue>[];
+ data: TData[];
+ onRowClick?: (row: TData) => void;
+ selectedRow?: TData;
+ getRowId?: (row: TData) => string;
+ maxHeight?: string; // e.g., "45vh"
+ minHeight?: string; // e.g., "400px"
+ defaultPageSize?: number;
+}
+
+export function DrawingListTableV2<TData extends DrawingData, TValue>({
+ columns,
+ data,
+ onRowClick,
+ selectedRow,
+ getRowId,
+ maxHeight = "45vh",
+ minHeight = "400px",
+ defaultPageSize = 10,
+}: DrawingListTableV2Props<TData, TValue>) {
+ const [sorting, setSorting] = useState<SortingState>([]);
+ const [pageIndex, setPageIndex] = useState(0);
+ const [pageSize, setPageSize] = useState(defaultPageSize);
+
+ // 기본 getRowId 함수: RegisterGroupId + DrawingNo + Discipline + CreateDt 조합
+ const defaultGetRowId = (row: TData): string => {
+ const registerId = row.RegisterGroupId || '';
+ const drawingNo = row.DrawingNo || '';
+ const discipline = row.Discipline || '';
+ const createDt = row.CreateDt
+ ? (row.CreateDt instanceof Date ? row.CreateDt.toISOString() : String(row.CreateDt))
+ : '';
+
+ return `${registerId}-${drawingNo}-${discipline}-${createDt}`;
+ };
+
+ const rowIdGetter = getRowId || defaultGetRowId;
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onSortingChange: setSorting,
+ onPaginationChange: (updater) => {
+ if (typeof updater === 'function') {
+ const newState = updater({ pageIndex, pageSize });
+ setPageIndex(newState.pageIndex);
+ setPageSize(newState.pageSize);
+ }
+ },
+ state: {
+ sorting,
+ pagination: {
+ pageIndex,
+ pageSize,
+ },
+ },
+ });
+
+ // 행이 선택되었는지 확인하는 함수
+ const isRowSelected = (row: TData): boolean => {
+ if (!selectedRow) return false;
+ return rowIdGetter(row) === rowIdGetter(selectedRow);
+ };
+
+ const handlePageSizeChange = (value: string) => {
+ const newSize = value === "all" ? data.length : parseInt(value);
+ setPageSize(newSize);
+ setPageIndex(0);
+ };
+
+ return (
+ <div className="flex flex-col h-full" style={{ minHeight }}>
+ {/* 테이블 영역 */}
+ <div
+ className="rounded-md border overflow-auto flex-1"
+ style={{
+ maxHeight,
+ minHeight: data.length === 0 ? minHeight : undefined,
+ }}
+ >
+ <Table className="min-w-max">
+ <TableHeader className="sticky top-0 z-10 bg-background">
+ {table.getHeaderGroups().map((headerGroup) => (
+ <TableRow key={headerGroup.id}>
+ {headerGroup.headers.map((header) => {
+ const isSorted = header.column.getIsSorted();
+ const canSort = header.column.getCanSort();
+
+ return (
+ <TableHead
+ key={header.id}
+ style={{ minWidth: header.column.columnDef.minSize }}
+ className="bg-background"
+ >
+ {header.isPlaceholder ? null : (
+ <div
+ className={`flex items-center gap-2 ${
+ canSort ? "cursor-pointer select-none hover:text-primary" : ""
+ }`}
+ onClick={
+ canSort
+ ? header.column.getToggleSortingHandler()
+ : undefined
+ }
+ >
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {canSort && (
+ <span className="text-muted-foreground">
+ {isSorted === "asc" ? (
+ <ArrowUp className="h-4 w-4" />
+ ) : isSorted === "desc" ? (
+ <ArrowDown className="h-4 w-4" />
+ ) : (
+ <ArrowUpDown className="h-4 w-4 opacity-50" />
+ )}
+ </span>
+ )}
+ </div>
+ )}
+ </TableHead>
+ );
+ })}
+ </TableRow>
+ ))}
+ </TableHeader>
+ <TableBody>
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => {
+ const isSelected = isRowSelected(row.original);
+ return (
+ <TableRow
+ key={row.id}
+ data-state={row.getIsSelected() && "selected"}
+ onClick={() => onRowClick?.(row.original)}
+ className={`cursor-pointer transition-colors ${
+ isSelected
+ ? "bg-accent hover:bg-accent"
+ : "hover:bg-muted/50"
+ }`}
+ >
+ {row.getVisibleCells().map((cell) => (
+ <TableCell
+ key={cell.id}
+ style={{ minWidth: cell.column.columnDef.minSize }}
+ >
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ </TableCell>
+ ))}
+ </TableRow>
+ );
+ })
+ ) : (
+ <TableRow>
+ <TableCell
+ colSpan={columns.length}
+ className="text-center text-muted-foreground"
+ style={{ height: "300px" }}
+ >
+ <div className="flex items-center justify-center h-full">
+ 데이터가 없습니다.
+ </div>
+ </TableCell>
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ </div>
+
+ {/* 페이지네이션 컨트롤 - 항상 렌더링하여 높이 일관성 유지 */}
+ <div className="flex items-center justify-between py-2 px-2 border-t flex-shrink-0">
+ {data.length > 0 ? (
+ <>
+ <div className="flex items-center gap-2">
+ <span className="text-sm text-muted-foreground">
+ 페이지 당 행 수:
+ </span>
+ <Select value={pageSize === data.length ? "all" : String(pageSize)} onValueChange={handlePageSizeChange}>
+ <SelectTrigger className="w-[100px] h-8">
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="10">10</SelectItem>
+ <SelectItem value="20">20</SelectItem>
+ <SelectItem value="50">50</SelectItem>
+ <SelectItem value="all">전체</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+
+ <div className="flex items-center gap-2">
+ <span className="text-sm text-muted-foreground">
+ {table.getState().pagination.pageIndex * pageSize + 1}-
+ {Math.min(
+ (table.getState().pagination.pageIndex + 1) * pageSize,
+ data.length
+ )}{" "}
+ / {data.length}
+ </span>
+ <div className="flex gap-1">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ <ChevronLeft className="h-4 w-4" />
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ <ChevronRight className="h-4 w-4" />
+ </Button>
+ </div>
+ </div>
+ </>
+ ) : (
+ <div className="text-sm text-muted-foreground opacity-0">
+ Placeholder for consistent height
+ </div>
+ )}
+ </div>
+ </div>
+ );
+}
+