(김준회) dolce: 기존 레이아웃과 유사한 v2 추가, bulk-upload를 MatchBatchDwgFile 사용하지 않도록 변경 (해당 API 동작 이상함)

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>
+  );
+}
+