diff --git a/backend-node/src/controllers/fileController.ts b/backend-node/src/controllers/fileController.ts
index a648a4f9..28a46232 100644
--- a/backend-node/src/controllers/fileController.ts
+++ b/backend-node/src/controllers/fileController.ts
@@ -1261,5 +1261,56 @@ export const setRepresentativeFile = async (
   }
 };
 
+/**
+ * 파일 정보 조회 (메타데이터만, 파일 내용 없음)
+ * 공개 접근 허용
+ */
+export const getFileInfo = async (req: Request, res: Response) => {
+  try {
+    const { objid } = req.params;
+
+    if (!objid) {
+      return res.status(400).json({
+        success: false,
+        message: "파일 ID가 필요합니다.",
+      });
+    }
+
+    // 파일 정보 조회
+    const fileRecord = await queryOne<any>(
+      `SELECT objid, real_file_name, file_size, file_ext, file_path, regdate, is_representative
+       FROM attach_file_info 
+       WHERE objid = $1 AND status = 'ACTIVE'`,
+      [parseInt(objid)]
+    );
+
+    if (!fileRecord) {
+      return res.status(404).json({
+        success: false,
+        message: "파일을 찾을 수 없습니다.",
+      });
+    }
+
+    res.json({
+      success: true,
+      data: {
+        objid: fileRecord.objid.toString(),
+        realFileName: fileRecord.real_file_name,
+        fileSize: fileRecord.file_size,
+        fileExt: fileRecord.file_ext,
+        filePath: fileRecord.file_path,
+        regdate: fileRecord.regdate,
+        isRepresentative: fileRecord.is_representative,
+      },
+    });
+  } catch (error) {
+    console.error("파일 정보 조회 오류:", error);
+    res.status(500).json({
+      success: false,
+      message: "파일 정보 조회 중 오류가 발생했습니다.",
+    });
+  }
+};
+
 // Multer 미들웨어 export
 export const uploadMiddleware = upload.array("files", 10); // 최대 10개 파일
diff --git a/backend-node/src/routes/fileRoutes.ts b/backend-node/src/routes/fileRoutes.ts
index 4514e37f..562a0b7f 100644
--- a/backend-node/src/routes/fileRoutes.ts
+++ b/backend-node/src/routes/fileRoutes.ts
@@ -11,6 +11,7 @@ import {
   generateTempToken,
   getFileByToken,
   setRepresentativeFile,
+  getFileInfo,
 } from "../controllers/fileController";
 import { authenticateToken } from "../middleware/authMiddleware";
 
@@ -31,6 +32,13 @@ router.get("/public/:token", getFileByToken);
  */
 router.get("/preview/:objid", previewFile);
 
+/**
+ * @route GET /api/files/info/:objid
+ * @desc 파일 정보 조회 (메타데이터만, 파일 내용 없음) - 공개 접근 허용
+ * @access Public
+ */
+router.get("/info/:objid", getFileInfo);
+
 // 모든 파일 API는 인증 필요
 router.use(authenticateToken);
 
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 2c400df5..582aa413 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -43,7 +43,7 @@ import {
 } from "lucide-react";
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
-import { apiClient, getCurrentUser, UserInfo } from "@/lib/api/client";
+import { apiClient, getCurrentUser, UserInfo, getFullImageUrl } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { DataTableComponent, DataTableColumn, DataTableFilter } from "@/types/screen-legacy-backup";
 import { cn } from "@/lib/utils";
@@ -2224,6 +2224,37 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     // 파일 타입 컬럼 처리 (가상 파일 컬럼 포함)
     const isFileColumn = actualWebType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
 
+    // 🖼️ 이미지 타입 컬럼: 썸네일로 표시
+    const isImageColumn = actualWebType === "image" || actualWebType === "img";
+    if (isImageColumn && value) {
+      // value가 objid (숫자 또는 숫자 문자열)인 경우 파일 API URL 사용
+      // 🔑 download 대신 preview 사용 (공개 접근 허용)
+      const isObjid = /^\d+$/.test(String(value));
+      const imageUrl = isObjid 
+        ? `/api/files/preview/${value}` 
+        : getFullImageUrl(String(value));
+      
+      return (
+        <div className="flex justify-center">
+          <img
+            src={imageUrl}
+            alt="이미지"
+            className="h-10 w-10 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+            style={{ maxWidth: "40px", maxHeight: "40px" }}
+            onClick={(e) => {
+              e.stopPropagation();
+              // 이미지 클릭 시 크게 보기 (새 탭에서 열기)
+              window.open(imageUrl, "_blank");
+            }}
+            onError={(e) => {
+              // 이미지 로드 실패 시 기본 아이콘 표시
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        </div>
+      );
+    }
+
     // 파일 타입 컬럼은 파일 아이콘으로 표시 (컬럼별 파일 관리)
     if (isFileColumn && rowData) {
       // 현재 행의 기본키 값 가져오기
diff --git a/frontend/components/v2/V2Media.tsx b/frontend/components/v2/V2Media.tsx
index 7321808f..733d6657 100644
--- a/frontend/components/v2/V2Media.tsx
+++ b/frontend/components/v2/V2Media.tsx
@@ -124,7 +124,8 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
     const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
     const recordTableName = formData?.tableName || tableName;
     const recordId = formData?.id;
-    const effectiveColumnName = isRecordMode ? 'attachments' : (columnName || id || 'attachments');
+    // 🔑 columnName 우선 사용 (실제 DB 컬럼명), 없으면 id, 최후에 attachments
+    const effectiveColumnName = columnName || id || 'attachments';
 
     // 레코드용 targetObjid 생성
     const getRecordTargetObjid = useCallback(() => {
@@ -471,13 +472,21 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
 
             // 폼 데이터 업데이트 - 부모 컴포넌트 시그니처에 맞게 (fieldName, value) 형식
             if (onFormDataChange && targetColumn) {
+              // 🔑 단일 파일: 첫 번째 objid만 전달 (DB 컬럼에 저장될 값)
+              // 복수 파일: 콤마 구분 문자열로 전달
+              const formValue = config.multiple 
+                ? fileIds.join(',') 
+                : (fileIds[0] || '');
+              
               console.log("📝 [V2Media] formData 업데이트:", {
                 columnName: targetColumn,
                 fileIds,
+                formValue,
+                isMultiple: config.multiple,
                 isRecordMode: effectiveIsRecordMode,
               });
               // (fieldName: string, value: any) 형식으로 호출
-              onFormDataChange(targetColumn, fileIds);
+              onFormDataChange(targetColumn, formValue);
             }
 
             // 그리드 파일 상태 새로고침 이벤트 발생
@@ -601,12 +610,19 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
 
           // 폼 데이터 업데이트 - 부모 컴포넌트 시그니처에 맞게 (fieldName, value) 형식
           if (onFormDataChange && targetColumn) {
+            // 🔑 단일 파일: 첫 번째 objid만 전달 (DB 컬럼에 저장될 값)
+            // 복수 파일: 콤마 구분 문자열로 전달
+            const formValue = config.multiple 
+              ? fileIds.join(',') 
+              : (fileIds[0] || '');
+            
             console.log("🗑️ [V2Media] 삭제 후 formData 업데이트:", {
               columnName: targetColumn,
               fileIds,
+              formValue,
             });
             // (fieldName: string, value: any) 형식으로 호출
-            onFormDataChange(targetColumn, fileIds);
+            onFormDataChange(targetColumn, formValue);
           }
 
           toast.success(`${fileName} 삭제 완료`);
diff --git a/frontend/lib/api/file.ts b/frontend/lib/api/file.ts
index e6cab8ae..f848c7e6 100644
--- a/frontend/lib/api/file.ts
+++ b/frontend/lib/api/file.ts
@@ -298,3 +298,31 @@ export const setRepresentativeFile = async (objid: string): Promise<{
     throw new Error("대표 파일 설정에 실패했습니다.");
   }
 };
+
+/**
+ * 파일 정보 조회 (메타데이터만, objid로 조회)
+ */
+export const getFileInfoByObjid = async (objid: string): Promise<{
+  success: boolean;
+  data?: {
+    objid: string;
+    realFileName: string;
+    fileSize: number;
+    fileExt: string;
+    filePath: string;
+    regdate: string;
+    isRepresentative: boolean;
+  };
+  message?: string;
+}> => {
+  try {
+    const response = await apiClient.get(`/files/info/${objid}`);
+    return response.data;
+  } catch (error) {
+    console.error("파일 정보 조회 오류:", error);
+    return {
+      success: false,
+      message: "파일 정보 조회에 실패했습니다.",
+    };
+  }
+};
diff --git a/frontend/lib/registry/components/file-upload/index.ts b/frontend/lib/registry/components/file-upload/index.ts
index fcca65cc..3f059ae1 100644
--- a/frontend/lib/registry/components/file-upload/index.ts
+++ b/frontend/lib/registry/components/file-upload/index.ts
@@ -14,22 +14,23 @@ import { FileUploadConfig } from "./types";
  */
 export const FileUploadDefinition = createComponentDefinition({
   id: "file-upload",
-  name: "파일 업로드",
-  nameEng: "FileUpload Component",
-  description: "파일 업로드를 위한 파일 선택 컴포넌트",
+  name: "파일 업로드 (레거시)",
+  nameEng: "FileUpload Component (Legacy)",
+  description: "파일 업로드를 위한 파일 선택 컴포넌트 (레거시)",
   category: ComponentCategory.INPUT,
   webType: "file",
   component: FileUploadComponent,
   defaultConfig: {
     placeholder: "입력하세요",
   },
-  defaultSize: { width: 350, height: 240 }, // 40 * 6 (파일 선택 + 목록 표시)
+  defaultSize: { width: 350, height: 240 },
   configPanel: FileUploadConfigPanel,
   icon: "Edit",
   tags: [],
   version: "1.0.0",
   author: "개발팀",
   documentation: "https://docs.example.com/components/file-upload",
+  hidden: true, // v2-file-upload 사용으로 패널에서 숨김
 });
 
 // 타입 내보내기
diff --git a/frontend/lib/registry/components/image-widget/index.ts b/frontend/lib/registry/components/image-widget/index.ts
index 67abbc80..aee663e8 100644
--- a/frontend/lib/registry/components/image-widget/index.ts
+++ b/frontend/lib/registry/components/image-widget/index.ts
@@ -13,9 +13,9 @@ import { ImageWidgetConfigPanel } from "./ImageWidgetConfigPanel";
  */
 export const ImageWidgetDefinition = createComponentDefinition({
   id: "image-widget",
-  name: "이미지 위젯",
-  nameEng: "Image Widget",
-  description: "이미지 표시 및 업로드",
+  name: "이미지 위젯 (레거시)",
+  nameEng: "Image Widget (Legacy)",
+  description: "이미지 표시 및 업로드 (레거시)",
   category: ComponentCategory.INPUT,
   webType: "image",
   component: ImageWidget,
@@ -32,6 +32,7 @@ export const ImageWidgetDefinition = createComponentDefinition({
   version: "1.0.0",
   author: "개발팀",
   documentation: "https://docs.example.com/components/image-widget",
+  hidden: true, // v2-file-upload 사용으로 패널에서 숨김
 });
 
 // 컴포넌트 내보내기
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 6519230d..172f0067 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -111,6 +111,7 @@ import "./v2-timeline-scheduler/TimelineSchedulerRenderer"; // 타임라인 스
 import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
 import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
 import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
+import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
new file mode 100644
index 00000000..de838fbf
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
@@ -0,0 +1,421 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { FileInfo, FileUploadConfig } from "./types";
+import { 
+  Upload, 
+  Download, 
+  Trash2, 
+  Eye, 
+  File, 
+  FileText, 
+  Image as ImageIcon,
+  Video,
+  Music,
+  Archive,
+  Presentation,
+  X,
+  Star
+} from "lucide-react";
+import { formatFileSize } from "@/lib/utils";
+import { FileViewerModal } from "./FileViewerModal";
+
+interface FileManagerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  uploadedFiles: FileInfo[];
+  onFileUpload: (files: File[]) => Promise<void>;
+  onFileDownload: (file: FileInfo) => void;
+  onFileDelete: (file: FileInfo) => void;
+  onFileView: (file: FileInfo) => void;
+  onSetRepresentative?: (file: FileInfo) => void; // 대표 이미지 설정 콜백
+  config: FileUploadConfig;
+  isDesignMode?: boolean;
+}
+
+export const FileManagerModal: React.FC<FileManagerModalProps> = ({
+  isOpen,
+  onClose,
+  uploadedFiles,
+  onFileUpload,
+  onFileDownload,
+  onFileDelete,
+  onFileView,
+  onSetRepresentative,
+  config,
+  isDesignMode = false,
+}) => {
+  const [dragOver, setDragOver] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null); // 선택된 파일 (좌측 미리보기용)
+  const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null); // 이미지 미리보기 URL
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 파일 아이콘 가져오기
+  const getFileIcon = (fileExt: string) => {
+    const ext = fileExt.toLowerCase();
+    
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
+      return <ImageIcon className="w-5 h-5 text-blue-500" />;
+    } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
+      return <FileText className="w-5 h-5 text-red-500" />;
+    } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
+      return <FileText className="w-5 h-5 text-green-500" />;
+    } else if (['ppt', 'pptx'].includes(ext)) {
+      return <Presentation className="w-5 h-5 text-orange-500" />;
+    } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
+      return <Video className="w-5 h-5 text-purple-500" />;
+    } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
+      return <Music className="w-5 h-5 text-pink-500" />;
+    } else if (['zip', 'rar', '7z'].includes(ext)) {
+      return <Archive className="w-5 h-5 text-yellow-500" />;
+    } else {
+      return <File className="w-5 h-5 text-gray-500" />;
+    }
+  };
+
+  // 파일 업로드 핸들러
+  const handleFileUpload = async (files: FileList | File[]) => {
+    if (!files || files.length === 0) return;
+    
+    setUploading(true);
+    try {
+      const fileArray = Array.from(files);
+      await onFileUpload(fileArray);
+      console.log('✅ FileManagerModal: 파일 업로드 완료');
+    } catch (error) {
+      console.error('❌ FileManagerModal: 파일 업로드 오류:', error);
+    } finally {
+      setUploading(false);
+      console.log('🔄 FileManagerModal: 업로드 상태 초기화');
+    }
+  };
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    
+    if (config.disabled || isDesignMode) return;
+    
+    const files = e.dataTransfer.files;
+    handleFileUpload(files);
+  };
+
+  // 파일 선택 핸들러
+  const handleFileSelect = () => {
+    if (config.disabled || isDesignMode) return;
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      handleFileUpload(files);
+    }
+    // 입력값 초기화
+    e.target.value = '';
+  };
+
+  // 파일 뷰어 핸들러
+  const handleFileViewInternal = (file: FileInfo) => {
+    setViewerFile(file);
+    setIsViewerOpen(true);
+  };
+
+  const handleViewerClose = () => {
+    setIsViewerOpen(false);
+    setViewerFile(null);
+  };
+
+  // 파일 클릭 시 미리보기 로드
+  const handleFileClick = async (file: FileInfo) => {
+    setSelectedFile(file);
+    
+    // 이미지 파일인 경우 미리보기 로드
+    // 🔑 점(.)을 제거하고 확장자만 비교
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
+    const ext = file.fileExt.toLowerCase().replace('.', '');
+    if (imageExtensions.includes(ext) || file.isImage) {
+      try {
+        // 🔑 이미 previewUrl이 있으면 바로 사용
+        if (file.previewUrl) {
+          setPreviewImageUrl(file.previewUrl);
+          return;
+        }
+        
+        // 이전 Blob URL 해제
+        if (previewImageUrl) {
+          URL.revokeObjectURL(previewImageUrl);
+        }
+        
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/files/preview/${file.objid}`, {
+          responseType: 'blob'
+        });
+        
+        const blob = new Blob([response.data]);
+        const blobUrl = URL.createObjectURL(blob);
+        setPreviewImageUrl(blobUrl);
+      } catch (error) {
+        console.error("이미지 로드 실패:", error);
+        // 🔑 에러 발생 시에도 previewUrl이 있으면 사용
+        if (file.previewUrl) {
+          setPreviewImageUrl(file.previewUrl);
+        } else {
+          setPreviewImageUrl(null);
+        }
+      }
+    } else {
+      setPreviewImageUrl(null);
+    }
+  };
+
+  // 컴포넌트 언마운트 시 Blob URL 해제
+  React.useEffect(() => {
+    return () => {
+      if (previewImageUrl) {
+        URL.revokeObjectURL(previewImageUrl);
+      }
+    };
+  }, [previewImageUrl]);
+
+  // 🔑 모달이 열릴 때 첫 번째 파일을 자동으로 선택
+  React.useEffect(() => {
+    if (isOpen && uploadedFiles.length > 0 && !selectedFile) {
+      const firstFile = uploadedFiles[0];
+      handleFileClick(firstFile);
+    }
+  }, [isOpen, uploadedFiles, selectedFile]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={() => {}}>
+        <DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden [&>button]:hidden">
+          <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <DialogTitle className="text-lg font-semibold">
+              파일 관리 ({uploadedFiles.length}개)
+            </DialogTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 hover:bg-gray-100"
+              onClick={onClose}
+              title="닫기"
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          </DialogHeader>
+          
+          <div className="flex flex-col space-y-3 h-[75vh]">
+            {/* 파일 업로드 영역 - 높이 축소 */}
+            {!isDesignMode && (
+              <div
+                className={`
+                  border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
+                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
+                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                  ${uploading ? 'opacity-75' : ''}
+                `}
+                onClick={() => {
+                  if (!config.disabled && !isDesignMode) {
+                    fileInputRef.current?.click();
+                  }
+                }}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple={config.multiple}
+                  accept={config.accept}
+                  onChange={handleFileInputChange}
+                  className="hidden"
+                  disabled={config.disabled}
+                />
+                
+                {uploading ? (
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                    <span className="text-sm text-blue-600 font-medium">업로드 중...</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center gap-3">
+                    <Upload className="h-6 w-6 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-700">
+                      파일을 드래그하거나 클릭하여 업로드하세요
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 좌우 분할 레이아웃 */}
+            <div className="flex-1 flex gap-4 min-h-0">
+              {/* 좌측: 이미지 미리보기 */}
+              <div className="w-1/2 border border-gray-200 rounded-lg bg-gray-50 flex items-center justify-center overflow-hidden">
+                {selectedFile && previewImageUrl ? (
+                  <img 
+                    src={previewImageUrl} 
+                    alt={selectedFile.realFileName}
+                    className="max-w-full max-h-full object-contain"
+                  />
+                ) : selectedFile ? (
+                  <div className="flex flex-col items-center text-gray-400">
+                    {getFileIcon(selectedFile.fileExt)}
+                    <p className="mt-2 text-sm">미리보기 불가능</p>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center text-gray-400">
+                    <ImageIcon className="w-16 h-16 mb-2" />
+                    <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
+                  </div>
+                )}
+              </div>
+
+              {/* 우측: 파일 목록 */}
+              <div className="w-1/2 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
+                <div className="p-3 border-b border-gray-200 bg-gray-50">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-medium text-gray-700">
+                      업로드된 파일
+                    </h3>
+                    {uploadedFiles.length > 0 && (
+                      <Badge variant="secondary" className="text-xs">
+                        총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3">
+                  {uploadedFiles.length > 0 ? (
+                    <div className="space-y-2">
+                      {uploadedFiles.map((file) => (
+                        <div
+                          key={file.objid}
+                          className={`
+                            flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
+                            ${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
+                          `}
+                          onClick={() => handleFileClick(file)}
+                        >
+                        <div className="flex-shrink-0">
+                          {getFileIcon(file.fileExt)}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-gray-900 truncate">
+                              {file.realFileName}
+                            </span>
+                            {file.isRepresentative && (
+                              <Badge variant="default" className="h-5 px-1.5 text-xs">
+                                대표
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500">
+                            {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
+                          </p>
+                        </div>
+                        <div className="flex items-center space-x-1">
+                          {onSetRepresentative && (
+                            <Button
+                              variant={file.isRepresentative ? "default" : "ghost"}
+                              size="sm"
+                              className="h-7 w-7 p-0"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onSetRepresentative(file);
+                              }}
+                              title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
+                            >
+                              <Star className={`w-3 h-3 ${file.isRepresentative ? "fill-white" : ""}`} />
+                            </Button>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleFileViewInternal(file);
+                            }}
+                            title="미리보기"
+                          >
+                            <Eye className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onFileDownload(file);
+                            }}
+                            title="다운로드"
+                          >
+                            <Download className="w-3 h-3" />
+                          </Button>
+                          {!isDesignMode && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onFileDelete(file);
+                              }}
+                              title="삭제"
+                            >
+                              <Trash2 className="w-3 h-3" />
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center py-8 text-gray-500">
+                    <File className="w-12 h-12 mb-3 text-gray-300" />
+                    <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 파일 뷰어 모달 */}
+      <FileViewerModal
+        file={viewerFile}
+        isOpen={isViewerOpen}
+        onClose={handleViewerClose}
+        onDownload={onFileDownload}
+        onDelete={!isDesignMode ? onFileDelete : undefined}
+      />
+    </>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
new file mode 100644
index 00000000..cc2a8ea3
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
@@ -0,0 +1,1345 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { uploadFiles, downloadFile, deleteFile, getComponentFiles, getFileInfoByObjid } from "@/lib/api/file";
+import { GlobalFileManager } from "@/lib/api/globalFile";
+import { formatFileSize } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { FileViewerModal } from "./FileViewerModal";
+import { FileManagerModal } from "./FileManagerModal";
+import { FileUploadConfig, FileInfo, FileUploadStatus, FileUploadResponse } from "./types";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  Upload,
+  File,
+  FileText,
+  Image,
+  Video,
+  Music,
+  Archive,
+  Download,
+  Eye,
+  Trash2,
+  AlertCircle,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  Presentation,
+} from "lucide-react";
+
+// 파일 아이콘 매핑
+const getFileIcon = (extension: string) => {
+  const ext = extension.toLowerCase().replace(".", "");
+
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
+    return <FileImage className="h-6 w-6 text-blue-500" />;
+  }
+  if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
+    return <FileVideo className="h-6 w-6 text-purple-500" />;
+  }
+  if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
+    return <FileAudio className="h-6 w-6 text-green-500" />;
+  }
+  if (["pdf"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-red-500" />;
+  }
+  if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-blue-600" />;
+  }
+  if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-green-600" />;
+  }
+  if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
+    return <Presentation className="h-6 w-6 text-orange-500" />;
+  }
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
+    return <Archive className="h-6 w-6 text-gray-500" />;
+  }
+
+  return <File className="h-6 w-6 text-gray-400" />;
+};
+
+export interface FileUploadComponentProps {
+  component: any;
+  componentConfig: FileUploadConfig;
+  componentStyle: React.CSSProperties;
+  className: string;
+  isInteractive: boolean;
+  isDesignMode: boolean;
+  formData: any;
+  onFormDataChange: (fieldName: string, value: any) => void;
+  onClick?: () => void;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
+  onUpdate?: (updates: Partial<any>) => void;
+  autoGeneration?: any;
+  hidden?: boolean;
+  onConfigChange?: (config: any) => void;
+}
+
+const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
+  component,
+  componentConfig,
+  componentStyle,
+  className,
+  isInteractive,
+  isDesignMode = false, // 기본값 설정
+  formData,
+  onFormDataChange,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  onUpdate,
+}) => {
+  // 🔑 인증 정보 가져오기
+  const { user } = useAuth();
+  
+  const [uploadedFiles, setUploadedFiles] = useState<FileInfo[]>([]);
+  const [uploadStatus, setUploadStatus] = useState<FileUploadStatus>("idle");
+  const [dragOver, setDragOver] = useState(false);
+  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const [isFileManagerOpen, setIsFileManagerOpen] = useState(false);
+  const [forceUpdate, setForceUpdate] = useState(0);
+  const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 🔑 레코드 모드 판단: formData에 id가 있으면 특정 행에 연결된 파일 관리
+  const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
+  const recordTableName = formData?.tableName || component.tableName;
+  const recordId = formData?.id;
+  // 🔑 컬럼명 결정: component.columnName을 우선 사용 (실제 DB 컬럼명)
+  // image, file 등의 웹타입 컬럼에 URL이 저장되어야 함
+  const columnName = component.columnName || component.id || 'attachments';
+  
+  // 🔑 레코드 모드용 targetObjid 생성
+  const getRecordTargetObjid = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      return `${recordTableName}:${recordId}:${columnName}`;
+    }
+    return null;
+  }, [isRecordMode, recordTableName, recordId, columnName]);
+
+  // 🔑 레코드별 고유 키 생성 (localStorage, 전역 상태용)
+  const getUniqueKey = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      // 레코드 모드: 테이블명:레코드ID:컴포넌트ID 형태로 고유 키 생성
+      return `fileUpload_${recordTableName}_${recordId}_${component.id}`;
+    }
+    // 기본 모드: 컴포넌트 ID만 사용
+    return `fileUpload_${component.id}`;
+  }, [isRecordMode, recordTableName, recordId, component.id]);
+
+  // 🔍 디버깅: 레코드 모드 상태 로깅
+  useEffect(() => {
+    console.log("📎 [FileUploadComponent] 모드 확인:", {
+      isRecordMode,
+      recordTableName,
+      recordId,
+      columnName,
+      targetObjid: getRecordTargetObjid(),
+      uniqueKey: getUniqueKey(),
+      formDataKeys: formData ? Object.keys(formData) : [],
+      // 🔍 추가 디버깅: formData.id 확인 (수정 모드 판단에 사용됨)
+      "formData.id": formData?.id,
+      "formData.tableName": formData?.tableName,
+      "formData.image": formData?.image,
+      "component.tableName": component.tableName,
+      "component.columnName": component.columnName,
+      "component.id": component.id,
+    });
+  }, [isRecordMode, recordTableName, recordId, columnName, getRecordTargetObjid, getUniqueKey, formData, component.tableName, component.columnName, component.id]);
+
+  // 🆕 레코드 ID 변경 시 파일 목록 초기화 및 새로 로드
+  const prevRecordIdRef = useRef<any>(null);
+  const prevIsRecordModeRef = useRef<boolean | null>(null);
+  useEffect(() => {
+    const recordIdChanged = prevRecordIdRef.current !== recordId;
+    const modeChanged = prevIsRecordModeRef.current !== null && prevIsRecordModeRef.current !== isRecordMode;
+    
+    if (recordIdChanged || modeChanged) {
+      console.log("📎 [FileUploadComponent] 레코드 상태 변경 감지:", {
+        prevRecordId: prevRecordIdRef.current,
+        currentRecordId: recordId,
+        prevIsRecordMode: prevIsRecordModeRef.current,
+        currentIsRecordMode: isRecordMode,
+      });
+      prevRecordIdRef.current = recordId;
+      prevIsRecordModeRef.current = isRecordMode;
+      
+      // 레코드 ID가 변경되거나 등록 모드(isRecordMode=false)로 전환되면 파일 목록 초기화
+      // 등록 모드에서는 항상 빈 상태로 시작해야 함
+      if (isRecordMode || !recordId) {
+        console.log("📎 [FileUploadComponent] 파일 목록 초기화 (새 레코드 또는 레코드 변경)");
+        setUploadedFiles([]);
+        setRepresentativeImageUrl(null);
+      }
+    } else if (prevIsRecordModeRef.current === null) {
+      // 초기 마운트 시 모드 저장
+      prevIsRecordModeRef.current = isRecordMode;
+    }
+  }, [recordId, isRecordMode]);
+
+  // 컴포넌트 마운트 시 즉시 localStorage에서 파일 복원
+  // 🔑 등록 모드(recordId가 없는 경우)에서는 파일을 복원하지 않음 - 항상 빈 상태로 시작
+  useEffect(() => {
+    if (!component?.id) return;
+    
+    // 등록 모드(새 레코드)인 경우 파일 복원 스킵 - 빈 상태 유지
+    if (!isRecordMode || !recordId) {
+      console.log("📎 [FileUploadComponent] 등록 모드: 파일 복원 스킵 (빈 상태 유지)");
+      return;
+    }
+
+    try {
+      // 🔑 레코드별 고유 키 사용 (수정 모드에서만)
+      const backupKey = getUniqueKey();
+      const backupFiles = localStorage.getItem(backupKey);
+      if (backupFiles) {
+        const parsedFiles = JSON.parse(backupFiles);
+        if (parsedFiles.length > 0) {
+          console.log("🚀 컴포넌트 마운트 시 파일 즉시 복원:", {
+            uniqueKey: backupKey,
+            componentId: component.id,
+            recordId: recordId,
+            restoredFiles: parsedFiles.length,
+            files: parsedFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
+          });
+          setUploadedFiles(parsedFiles);
+
+          // 전역 상태에도 복원 (레코드별 고유 키 사용)
+          if (typeof window !== "undefined") {
+            (window as any).globalFileState = {
+              ...(window as any).globalFileState,
+              [backupKey]: parsedFiles,
+            };
+          }
+        }
+      }
+    } catch (e) {
+      console.warn("컴포넌트 마운트 시 파일 복원 실패:", e);
+    }
+  }, [component.id, getUniqueKey, recordId, isRecordMode]); // 레코드별 고유 키 변경 시 재실행
+
+  // 🔑 수정 모드: formData[columnName]에 저장된 objid로 이미지 로드
+  // 이 로직은 isRecordMode와 상관없이 formData에 이미지 objid가 있으면 표시
+  useEffect(() => {
+    const imageObjid = formData?.[columnName];
+    
+    // 이미지 objid가 있고, 숫자 문자열인 경우에만 처리
+    if (imageObjid && /^\d+$/.test(String(imageObjid))) {
+      console.log("🖼️ [FileUploadComponent] formData에서 이미지 objid 발견:", {
+        columnName,
+        imageObjid,
+        currentFilesCount: uploadedFiles.length,
+      });
+      
+      // 이미 같은 objid의 파일이 로드되어 있으면 스킵
+      const alreadyLoaded = uploadedFiles.some(f => String(f.objid) === String(imageObjid));
+      if (alreadyLoaded) {
+        console.log("🖼️ [FileUploadComponent] 이미 로드된 이미지, 스킵");
+        return;
+      }
+      
+      const objidStr = String(imageObjid);
+      const previewUrl = `/api/files/preview/${objidStr}`;
+      
+      // 🔑 실제 파일 정보 조회
+      (async () => {
+        try {
+          const fileInfoResponse = await getFileInfoByObjid(objidStr);
+          
+          if (fileInfoResponse.success && fileInfoResponse.data) {
+            const { realFileName, fileSize, fileExt, regdate, isRepresentative } = fileInfoResponse.data;
+            
+            console.log("🖼️ [FileUploadComponent] 파일 정보 조회 성공:", {
+              objid: objidStr,
+              realFileName,
+              fileExt,
+            });
+            
+            const fileInfo = {
+              objid: objidStr,
+              realFileName: realFileName,
+              fileExt: fileExt,
+              fileSize: fileSize,
+              filePath: previewUrl,
+              regdate: regdate,
+              isImage: true,
+              previewUrl: previewUrl,
+              isRepresentative: isRepresentative,
+            };
+            
+            setUploadedFiles([fileInfo]);
+            setRepresentativeImageUrl(previewUrl);
+          } else {
+            // 파일 정보 조회 실패 시 최소 정보로 추가
+            console.warn("🖼️ [FileUploadComponent] 파일 정보 조회 실패, 최소 정보 사용");
+            const minimalFileInfo = {
+              objid: objidStr,
+              realFileName: `image_${objidStr}.jpg`,
+              fileExt: '.jpg',
+              fileSize: 0,
+              filePath: previewUrl,
+              regdate: new Date().toISOString(),
+              isImage: true,
+              previewUrl: previewUrl,
+            };
+            
+            setUploadedFiles([minimalFileInfo]);
+            setRepresentativeImageUrl(previewUrl);
+          }
+        } catch (error) {
+          console.error("🖼️ [FileUploadComponent] 파일 정보 조회 오류:", error);
+        }
+      })();
+    }
+  }, [formData, columnName, uploadedFiles]);
+
+  // 🎯 화면설계 모드에서 실제 화면으로의 실시간 동기화 이벤트 리스너
+  useEffect(() => {
+    const handleDesignModeFileChange = (event: CustomEvent) => {
+      console.log("🎯🎯🎯 FileUploadComponent 화면설계 모드 파일 변경 이벤트 수신:", {
+        eventComponentId: event.detail.componentId,
+        currentComponentId: component.id,
+        isMatch: event.detail.componentId === component.id,
+        filesCount: event.detail.files?.length || 0,
+        action: event.detail.action,
+        source: event.detail.source,
+        eventDetail: event.detail,
+      });
+
+      // 현재 컴포넌트와 일치하고 화면설계 모드에서 온 이벤트인 경우
+      if (event.detail.componentId === component.id && event.detail.source === "designMode") {
+        // 파일 상태 업데이트
+        const newFiles = event.detail.files || [];
+        setUploadedFiles(newFiles);
+
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = getUniqueKey();
+          localStorage.setItem(backupKey, JSON.stringify(newFiles));
+          console.log("💾 화면설계 모드 동기화 후 localStorage 백업 업데이트:", {
+            uniqueKey: backupKey,
+            componentId: component.id,
+            recordId: recordId,
+            fileCount: newFiles.length,
+          });
+        } catch (e) {
+          console.warn("localStorage 백업 업데이트 실패:", e);
+        }
+
+        // 전역 상태 업데이트
+        if (typeof window !== "undefined") {
+          (window as any).globalFileState = {
+            ...(window as any).globalFileState,
+            [component.id]: newFiles,
+          };
+        }
+
+        // onUpdate 콜백 호출 (부모 컴포넌트에 알림)
+        if (onUpdate) {
+          onUpdate({
+            uploadedFiles: newFiles,
+            lastFileUpdate: event.detail.timestamp,
+          });
+        }
+
+        console.log("🎉🎉🎉 화면설계 모드 → 실제 화면 동기화 완료:", {
+          componentId: component.id,
+          finalFileCount: newFiles.length,
+        });
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("globalFileStateChanged", handleDesignModeFileChange as EventListener);
+
+      return () => {
+        window.removeEventListener("globalFileStateChanged", handleDesignModeFileChange as EventListener);
+      };
+    }
+  }, [component.id, onUpdate]);
+
+  // 템플릿 파일과 데이터 파일을 조회하는 함수
+  const loadComponentFiles = useCallback(async () => {
+    if (!component?.id) return false;
+
+    // 🔑 등록 모드(새 레코드)인 경우 파일 조회 스킵 - 빈 상태 유지
+    if (!isRecordMode || !recordId) {
+      console.log("📂 [FileUploadComponent] 등록 모드: 파일 조회 스킵 (빈 상태 유지)", {
+        isRecordMode,
+        recordId,
+        componentId: component.id,
+      });
+      return false;
+    }
+
+    try {
+      // 🔑 레코드 모드: 해당 행의 파일만 조회
+      if (isRecordMode && recordTableName && recordId) {
+        console.log("📂 [FileUploadComponent] 레코드 모드 파일 조회:", {
+          tableName: recordTableName,
+          recordId: recordId,
+          columnName: columnName,
+          targetObjid: getRecordTargetObjid(),
+        });
+      }
+
+      // 1. formData에서 screenId 가져오기
+      let screenId = formData?.screenId;
+      
+      // 2. URL에서 screenId 추출 (/screens/:id 패턴)
+      if (!screenId && typeof window !== "undefined") {
+        const pathname = window.location.pathname;
+        const screenMatch = pathname.match(/\/screens\/(\d+)/);
+        if (screenMatch) {
+          screenId = parseInt(screenMatch[1]);
+        }
+      }
+
+      // 3. 디자인 모드인 경우 임시 화면 ID 사용
+      if (!screenId && isDesignMode) {
+        screenId = 999999; // 디자인 모드 임시 ID
+      }
+
+      // 4. 화면 ID가 없으면 컴포넌트 ID만으로 조회 시도
+      if (!screenId) {
+        console.warn("⚠️ 화면 ID 없음, 컴포넌트 ID만으로 파일 조회:", {
+          componentId: component.id,
+          pathname: window.location.pathname,
+          formData: formData,
+        });
+        // screenId를 0으로 설정하여 컴포넌트 ID로만 조회
+        screenId = 0;
+      }
+
+      const params = {
+        screenId,
+        componentId: component.id,
+        tableName: recordTableName || formData?.tableName || component.tableName,
+        recordId: recordId || formData?.id,
+        columnName: columnName, // 🔑 레코드 모드에서 사용하는 columnName
+      };
+
+      console.log("📂 [FileUploadComponent] 파일 조회 파라미터:", params);
+
+      const response = await getComponentFiles(params);
+
+      if (response.success) {
+
+        // 파일 데이터 형식 통일
+        const formattedFiles = response.totalFiles.map((file: any) => ({
+          objid: file.objid || file.id,
+          savedFileName: file.savedFileName || file.saved_file_name,
+          realFileName: file.realFileName || file.real_file_name,
+          fileSize: file.fileSize || file.file_size,
+          fileExt: file.fileExt || file.file_ext,
+          regdate: file.regdate,
+          status: file.status || "ACTIVE",
+          uploadedAt: file.uploadedAt || new Date().toISOString(),
+          ...file,
+        }));
+
+
+        // 🔄 localStorage의 기존 파일과 서버 파일 병합 (레코드별 고유 키 사용)
+        let finalFiles = formattedFiles;
+        const uniqueKey = getUniqueKey();
+        try {
+          const backupFiles = localStorage.getItem(uniqueKey);
+          if (backupFiles) {
+            const parsedBackupFiles = JSON.parse(backupFiles);
+
+            // 서버에 없는 localStorage 파일들을 추가 (objid 기준으로 중복 제거)
+            const serverObjIds = new Set(formattedFiles.map((f: any) => f.objid));
+            const additionalFiles = parsedBackupFiles.filter((f: any) => !serverObjIds.has(f.objid));
+
+            finalFiles = [...formattedFiles, ...additionalFiles];
+            console.log("📂 [FileUploadComponent] 파일 병합 완료:", {
+              uniqueKey,
+              serverFiles: formattedFiles.length,
+              localFiles: parsedBackupFiles.length,
+              finalFiles: finalFiles.length,
+            });
+          }
+        } catch (e) {
+          console.warn("파일 병합 중 오류:", e);
+        }
+
+        setUploadedFiles(finalFiles);
+
+        // 전역 상태에도 저장 (레코드별 고유 키 사용)
+        if (typeof window !== "undefined") {
+          (window as any).globalFileState = {
+            ...(window as any).globalFileState,
+            [uniqueKey]: finalFiles,
+          };
+
+          // 🌐 전역 파일 저장소에 등록 (페이지 간 공유용)
+          GlobalFileManager.registerFiles(finalFiles, {
+            uploadPage: window.location.pathname,
+            componentId: component.id,
+            screenId: formData?.screenId,
+            recordId: recordId,
+          });
+
+          // localStorage 백업도 병합된 파일로 업데이트 (레코드별 고유 키 사용)
+          try {
+            localStorage.setItem(uniqueKey, JSON.stringify(finalFiles));
+          } catch (e) {
+            console.warn("localStorage 백업 업데이트 실패:", e);
+          }
+        }
+        return true; // 새로운 로직 사용됨
+      }
+    } catch (error) {
+      console.error("파일 조회 오류:", error);
+    }
+    return false; // 기존 로직 사용
+  }, [component.id, component.tableName, component.columnName, formData?.screenId, formData?.tableName, formData?.id, getUniqueKey, recordId, isRecordMode, recordTableName, columnName]);
+
+  // 컴포넌트 파일 동기화 (DB 우선, localStorage는 보조)
+  useEffect(() => {
+    const componentFiles = (component as any)?.uploadedFiles || [];
+    const lastUpdate = (component as any)?.lastFileUpdate;
+
+    console.log("🔄 FileUploadComponent 파일 동기화 시작:", {
+      componentId: component.id,
+      componentFiles: componentFiles.length,
+      formData: formData,
+      screenId: formData?.screenId,
+      tableName: formData?.tableName, // 🔍 테이블명 확인
+      recordId: formData?.id, // 🔍 레코드 ID 확인
+      currentUploadedFiles: uploadedFiles.length,
+    });
+
+    // 🔒 항상 DB에서 최신 파일 목록을 조회 (멀티테넌시 격리)
+    loadComponentFiles().then((dbLoadSuccess) => {
+      if (dbLoadSuccess) {
+        return; // DB 로드 성공 시 localStorage 무시
+      }
+
+      // DB 로드 실패 시에만 기존 로직 사용 (하위 호환성)
+
+      // 전역 상태에서 최신 파일 정보 가져오기
+      const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
+      const globalFiles = globalFileState[component.id] || [];
+
+      // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
+      const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
+
+
+      // 최신 파일과 현재 파일 비교
+      if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
+        setUploadedFiles(currentFiles);
+        setForceUpdate((prev) => prev + 1);
+      }
+    });
+  }, [loadComponentFiles, component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
+
+  // 전역 상태 변경 감지 (모든 파일 컴포넌트 동기화 + 화면 복원)
+  useEffect(() => {
+    const handleGlobalFileStateChange = (event: CustomEvent) => {
+      const { componentId, files, fileCount, timestamp, isRestore } = event.detail;
+
+      console.log("🔄 FileUploadComponent 전역 상태 변경 감지:", {
+        currentComponentId: component.id,
+        eventComponentId: componentId,
+        isForThisComponent: componentId === component.id,
+        newFileCount: fileCount,
+        currentFileCount: uploadedFiles.length,
+        timestamp,
+        isRestore: !!isRestore,
+      });
+
+      // 같은 컴포넌트 ID인 경우에만 업데이트
+      if (componentId === component.id) {
+        const logMessage = isRestore ? "🔄 화면 복원으로 파일 상태 동기화" : "✅ 파일 상태 동기화 적용";
+        console.log(logMessage, {
+          componentId: component.id,
+          이전파일수: uploadedFiles?.length || 0,
+          새파일수: files?.length || 0,
+          files: files?.map((f: any) => ({ objid: f.objid, name: f.realFileName })) || [],
+        });
+
+        setUploadedFiles(files);
+        setForceUpdate((prev) => prev + 1);
+
+        // localStorage 백업도 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = getUniqueKey();
+          localStorage.setItem(backupKey, JSON.stringify(files));
+        } catch (e) {
+          console.warn("localStorage 백업 실패:", e);
+        }
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+
+      return () => {
+        window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+      };
+    }
+  }, [component.id, uploadedFiles.length]);
+
+  // 파일 업로드 설정 - componentConfig가 undefined일 수 있으므로 안전하게 처리
+  const safeComponentConfig = componentConfig || {};
+  const fileConfig = {
+    accept: safeComponentConfig.accept || "*/*",
+    multiple: safeComponentConfig.multiple || false,
+    maxSize: safeComponentConfig.maxSize || 10 * 1024 * 1024, // 10MB
+    maxFiles: safeComponentConfig.maxFiles || 5,
+    ...safeComponentConfig,
+  } as FileUploadConfig;
+
+  // 파일 선택 핸들러
+  const handleFileSelect = useCallback(() => {
+    console.log("🎯 handleFileSelect 호출됨:", {
+      hasFileInputRef: !!fileInputRef.current,
+      fileInputRef: fileInputRef.current,
+      fileInputType: fileInputRef.current?.type,
+      fileInputHidden: fileInputRef.current?.className,
+    });
+
+    if (fileInputRef.current) {
+      console.log("✅ fileInputRef.current.click() 호출");
+      fileInputRef.current.click();
+    } else {
+      console.log("❌ fileInputRef.current가 null입니다");
+    }
+  }, []);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      handleFileUpload(files);
+    }
+  }, []);
+
+  // 파일 업로드 처리
+  const handleFileUpload = useCallback(
+    async (files: File[]) => {
+      if (!files.length) return;
+
+      // 중복 파일 체크
+      const existingFileNames = uploadedFiles.map((f) => f.realFileName.toLowerCase());
+      const duplicates: string[] = [];
+      const uniqueFiles: File[] = [];
+
+      files.forEach((file) => {
+        const fileName = file.name.toLowerCase();
+        if (existingFileNames.includes(fileName)) {
+          duplicates.push(file.name);
+        } else {
+          uniqueFiles.push(file);
+        }
+      });
+
+      if (duplicates.length > 0) {
+        toast.error(`중복된 파일이 있습니다: ${duplicates.join(", ")}`, {
+          description: "같은 이름의 파일이 이미 업로드되어 있습니다.",
+          duration: 4000,
+        });
+
+        if (uniqueFiles.length === 0) {
+          return; // 모든 파일이 중복이면 업로드 중단
+        }
+
+        // 일부만 중복인 경우 고유한 파일만 업로드
+        toast.info(`${uniqueFiles.length}개의 새로운 파일만 업로드합니다.`);
+      }
+
+      const filesToUpload = uniqueFiles.length > 0 ? uniqueFiles : files;
+      setUploadStatus("uploading");
+      toast.loading("파일을 업로드하는 중...", { id: "file-upload" });
+
+      try {
+        // 🔑 레코드 모드 우선 사용
+        const effectiveTableName = recordTableName || formData?.tableName || component.tableName || "default_table";
+        const effectiveRecordId = recordId || formData?.id;
+        const effectiveColumnName = columnName;
+        
+        // screenId 추출 (우선순위: formData > URL)
+        let screenId = formData?.screenId;
+        if (!screenId && typeof window !== "undefined") {
+          const pathname = window.location.pathname;
+          const screenMatch = pathname.match(/\/screens\/(\d+)/);
+          if (screenMatch) {
+            screenId = parseInt(screenMatch[1]);
+          }
+        }
+
+        let targetObjid;
+        // 🔑 레코드 모드 판단 개선
+        const effectiveIsRecordMode = isRecordMode || (effectiveRecordId && !String(effectiveRecordId).startsWith('temp_'));
+        
+        if (effectiveIsRecordMode && effectiveTableName && effectiveRecordId) {
+          // 🎯 레코드 모드: 특정 행에 파일 연결
+          targetObjid = `${effectiveTableName}:${effectiveRecordId}:${effectiveColumnName}`;
+          console.log("📁 [레코드 모드] 파일 업로드:", {
+            targetObjid,
+            tableName: effectiveTableName,
+            recordId: effectiveRecordId,
+            columnName: effectiveColumnName,
+          });
+        } else if (screenId) {
+          // 🔑 템플릿 파일 (백엔드 조회 형식과 동일하게)
+          targetObjid = `screen_files:${screenId}:${component.id}:${effectiveColumnName}`;
+          console.log("📝 [템플릿 모드] 파일 업로드:", targetObjid);
+        } else {
+          // 기본값 (화면관리에서 사용)
+          targetObjid = `temp_${component.id}`;
+          console.log("📝 [기본 모드] 파일 업로드:", targetObjid);
+        }
+
+        // 🔒 현재 사용자의 회사 코드 가져오기 (멀티테넌시 격리)
+        const userCompanyCode = user?.companyCode || (window as any).__user__?.companyCode;
+        
+        console.log("📤 [FileUploadComponent] 파일 업로드 준비:", {
+          userCompanyCode,
+          isRecordMode: effectiveIsRecordMode,
+          tableName: effectiveTableName,
+          recordId: effectiveRecordId,
+          columnName: effectiveColumnName,
+          targetObjid,
+        });
+        
+        // 🔑 레코드 모드일 때는 effectiveTableName을 우선 사용
+        // formData.linkedTable이 'screen_files' 같은 기본값일 수 있으므로 레코드 모드에서는 무시
+        const finalLinkedTable = effectiveIsRecordMode 
+          ? effectiveTableName 
+          : (formData?.linkedTable || effectiveTableName);
+        
+        const uploadData = {
+          // 🎯 formData에서 백엔드 API 설정 가져오기
+          autoLink: formData?.autoLink || true,
+          linkedTable: finalLinkedTable,
+          recordId: effectiveRecordId || `temp_${component.id}`,
+          columnName: effectiveColumnName,
+          isVirtualFileColumn: formData?.isVirtualFileColumn || true,
+          docType: component.fileConfig?.docType || "DOCUMENT",
+          docTypeName: component.fileConfig?.docTypeName || "일반 문서",
+          companyCode: userCompanyCode, // 🔒 멀티테넌시: 회사 코드 명시적 전달
+          // 호환성을 위한 기존 필드들
+          tableName: effectiveTableName,
+          fieldName: effectiveColumnName,
+          targetObjid: targetObjid, // InteractiveDataTable 호환을 위한 targetObjid 추가
+          // 🆕 레코드 모드 플래그
+          isRecordMode: effectiveIsRecordMode,
+        };
+        
+        console.log("📤 [FileUploadComponent] uploadData 최종:", {
+          isRecordMode: effectiveIsRecordMode,
+          linkedTable: finalLinkedTable,
+          recordId: effectiveRecordId,
+          columnName: effectiveColumnName,
+          targetObjid,
+        });
+
+
+        console.log("🚀 [FileUploadComponent] uploadFiles API 호출 직전:", {
+          filesCount: filesToUpload.length,
+          uploadData,
+        });
+        
+        const response = await uploadFiles({
+          files: filesToUpload,
+          ...uploadData,
+        });
+
+        console.log("📥 [FileUploadComponent] uploadFiles API 응답:", response);
+
+        if (response.success) {
+          // FileUploadResponse 타입에 맞게 files 배열 사용
+          const fileData = response.files || (response as any).data || [];
+
+          if (fileData.length === 0) {
+            throw new Error("업로드된 파일 데이터를 받지 못했습니다.");
+          }
+
+          const newFiles = fileData.map((file: any) => ({
+            objid: file.objid || file.id,
+            savedFileName: file.saved_file_name || file.savedFileName,
+            realFileName: file.real_file_name || file.realFileName || file.name,
+            fileSize: file.file_size || file.fileSize || file.size,
+            fileExt: file.file_ext || file.fileExt || file.extension,
+            filePath: file.file_path || file.filePath || file.path,
+            docType: file.doc_type || file.docType,
+            docTypeName: file.doc_type_name || file.docTypeName,
+            targetObjid: file.target_objid || file.targetObjid,
+            parentTargetObjid: file.parent_target_objid || file.parentTargetObjid,
+            companyCode: file.company_code || file.companyCode,
+            writer: file.writer,
+            regdate: file.regdate,
+            status: file.status || "ACTIVE",
+            uploadedAt: new Date().toISOString(),
+            ...file,
+          }));
+
+
+          const updatedFiles = [...uploadedFiles, ...newFiles];
+
+          setUploadedFiles(updatedFiles);
+          setUploadStatus("success");
+
+          // localStorage 백업 (레코드별 고유 키 사용)
+          try {
+            const backupKey = getUniqueKey();
+            localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+          } catch (e) {
+            console.warn("localStorage 백업 실패:", e);
+          }
+
+          // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
+          if (typeof window !== "undefined") {
+            // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
+            const globalFileState = (window as any).globalFileState || {};
+            const uniqueKey = getUniqueKey();
+            globalFileState[uniqueKey] = updatedFiles;
+            (window as any).globalFileState = globalFileState;
+
+            // 🌐 전역 파일 저장소에 새 파일 등록 (페이지 간 공유용)
+            GlobalFileManager.registerFiles(newFiles, {
+              uploadPage: window.location.pathname,
+              componentId: component.id,
+              screenId: formData?.screenId,
+              recordId: recordId, // 🆕 레코드 ID 추가
+            });
+
+            // 모든 파일 컴포넌트에 동기화 이벤트 발생
+            const syncEvent = new CustomEvent("globalFileStateChanged", {
+              detail: {
+                componentId: component.id,
+                uniqueKey: uniqueKey, // 🆕 고유 키 추가
+                recordId: recordId, // 🆕 레코드 ID 추가
+                files: updatedFiles,
+                fileCount: updatedFiles.length,
+                timestamp: Date.now(),
+              },
+            });
+            window.dispatchEvent(syncEvent);
+
+            console.log("🌐 전역 파일 상태 업데이트 및 동기화 이벤트 발생:", {
+              componentId: component.id,
+              fileCount: updatedFiles.length,
+              globalState: Object.keys(globalFileState).map((id) => ({
+                id,
+                fileCount: globalFileState[id]?.length || 0,
+              })),
+            });
+          }
+
+          // 컴포넌트 업데이트
+          if (onUpdate) {
+            const timestamp = Date.now();
+            console.log("🔄 onUpdate 호출:", {
+              componentId: component.id,
+              uploadedFiles: updatedFiles.length,
+              timestamp: timestamp,
+            });
+            onUpdate({
+              uploadedFiles: updatedFiles,
+              lastFileUpdate: timestamp,
+            });
+          } else {
+            console.warn("⚠️ onUpdate 콜백이 없습니다!");
+          }
+
+          // 🆕 이미지/파일 컬럼에 objid 저장 (formData 업데이트)
+          if (onFormDataChange && effectiveColumnName) {
+            // 🎯 이미지/파일 타입 컬럼: 첫 번째 파일의 objid를 저장 (그리드에서 표시용)
+            // 단일 파일인 경우 단일 값, 복수 파일인 경우 콤마 구분 문자열
+            const fileObjids = updatedFiles.map(file => file.objid);
+            const columnValue = fileConfig.multiple 
+              ? fileObjids.join(',')  // 복수 파일: 콤마 구분
+              : (fileObjids[0] || ''); // 단일 파일: 첫 번째 파일 ID
+            
+            console.log("📎 [파일 업로드] 컬럼 데이터 동기화:", {
+              tableName: effectiveTableName,
+              recordId: effectiveRecordId,
+              columnName: effectiveColumnName,
+              columnValue,
+              fileCount: updatedFiles.length,
+              isMultiple: fileConfig.multiple,
+            });
+            
+            // onFormDataChange를 (fieldName, value) 형태로 호출 (SaveModal 호환)
+            onFormDataChange(effectiveColumnName, columnValue);
+          }
+
+          // 그리드 파일 상태 새로고침 이벤트 발생
+          if (typeof window !== "undefined") {
+            const refreshEvent = new CustomEvent("refreshFileStatus", {
+              detail: {
+                tableName: effectiveTableName,
+                recordId: effectiveRecordId,
+                columnName: effectiveColumnName,
+                targetObjid: targetObjid,
+                fileCount: updatedFiles.length,
+              },
+            });
+            window.dispatchEvent(refreshEvent);
+            console.log("🔄 그리드 파일 상태 새로고침 이벤트 발생:", {
+              tableName: effectiveTableName,
+              recordId: effectiveRecordId,
+              columnName: effectiveColumnName,
+              targetObjid,
+              fileCount: updatedFiles.length,
+            });
+          }
+
+          // 컴포넌트 설정 콜백
+          if (safeComponentConfig.onFileUpload) {
+            safeComponentConfig.onFileUpload(newFiles);
+          }
+
+          // 성공 시 토스트 처리
+          setUploadStatus("idle");
+          toast.dismiss("file-upload");
+          toast.success(`${newFiles.length}개 파일 업로드 완료`);
+        } else {
+          console.error("❌ 파일 업로드 실패:", response);
+          throw new Error(response.message || (response as any).error || "파일 업로드에 실패했습니다.");
+        }
+      } catch (error) {
+        console.error("파일 업로드 오류:", error);
+        setUploadStatus("error");
+        toast.dismiss("file-upload");
+        toast.error(`파일 업로드 오류: ${error instanceof Error ? error.message : "알 수 없는 오류"}`);
+      }
+    },
+    [safeComponentConfig, uploadedFiles, onFormDataChange, component.columnName, component.id, formData],
+  );
+
+  // 파일 뷰어 열기
+  const handleFileView = useCallback((file: FileInfo) => {
+    setViewerFile(file);
+    setIsViewerOpen(true);
+  }, []);
+
+  // 파일 뷰어 닫기
+  const handleViewerClose = useCallback(() => {
+    setIsViewerOpen(false);
+    setViewerFile(null);
+  }, []);
+
+  // 파일 다운로드
+  const handleFileDownload = useCallback(async (file: FileInfo) => {
+    try {
+      await downloadFile({
+        fileId: file.objid,
+        serverFilename: file.savedFileName,
+        originalName: file.realFileName,
+      });
+      toast.success(`${file.realFileName} 다운로드 완료`);
+    } catch (error) {
+      console.error("파일 다운로드 오류:", error);
+      toast.error("파일 다운로드에 실패했습니다.");
+    }
+  }, []);
+
+  // 파일 삭제
+  const handleFileDelete = useCallback(
+    async (file: FileInfo | string) => {
+      try {
+        const fileId = typeof file === "string" ? file : file.objid;
+        const fileName = typeof file === "string" ? "파일" : file.realFileName;
+
+        const serverFilename = typeof file === "string" ? "temp_file" : file.savedFileName;
+        await deleteFile(fileId, serverFilename);
+
+        const updatedFiles = uploadedFiles.filter((f) => f.objid !== fileId);
+        setUploadedFiles(updatedFiles);
+
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = getUniqueKey();
+          localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+        } catch (e) {
+          console.warn("localStorage 백업 업데이트 실패:", e);
+        }
+
+        // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
+        if (typeof window !== "undefined") {
+          // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
+          const globalFileState = (window as any).globalFileState || {};
+          const uniqueKey = getUniqueKey();
+          globalFileState[uniqueKey] = updatedFiles;
+          (window as any).globalFileState = globalFileState;
+
+          // 모든 파일 컴포넌트에 동기화 이벤트 발생
+          const syncEvent = new CustomEvent("globalFileStateChanged", {
+            detail: {
+              componentId: component.id,
+              uniqueKey: uniqueKey, // 🆕 고유 키 추가
+              recordId: recordId, // 🆕 레코드 ID 추가
+              files: updatedFiles,
+              fileCount: updatedFiles.length,
+              timestamp: Date.now(),
+              source: "realScreen", // 🎯 실제 화면에서 온 이벤트임을 표시
+              action: "delete",
+            },
+          });
+          window.dispatchEvent(syncEvent);
+
+          console.log("🗑️ 파일 삭제 후 전역 상태 동기화:", {
+            componentId: component.id,
+            deletedFile: fileName,
+            remainingFiles: updatedFiles.length,
+          });
+        }
+
+        // 컴포넌트 업데이트
+        if (onUpdate) {
+          const timestamp = Date.now();
+          onUpdate({
+            uploadedFiles: updatedFiles,
+            lastFileUpdate: timestamp,
+          });
+        }
+
+        // 🆕 파일 삭제 후 컬럼 데이터 동기화
+        if (onFormDataChange && columnName) {
+          // 🎯 삭제 후 남은 파일들의 objid로 컬럼 값 업데이트
+          const fileObjids = updatedFiles.map(f => f.objid);
+          const columnValue = fileConfig.multiple 
+            ? fileObjids.join(',')
+            : (fileObjids[0] || '');
+          
+          console.log("📎 [파일 삭제] 컬럼 데이터 동기화:", {
+            tableName: recordTableName,
+            recordId: recordId,
+            columnName: columnName,
+            columnValue,
+            remainingFiles: updatedFiles.length,
+          });
+          
+          // onFormDataChange를 (fieldName, value) 형태로 호출 (SaveModal 호환)
+          onFormDataChange(columnName, columnValue);
+        }
+
+        toast.success(`${fileName} 삭제 완료`);
+      } catch (error) {
+        console.error("파일 삭제 오류:", error);
+        toast.error("파일 삭제에 실패했습니다.");
+      }
+    },
+    [uploadedFiles, onUpdate, component.id, isRecordMode, onFormDataChange, recordTableName, recordId, columnName, getUniqueKey],
+  );
+
+  // 대표 이미지 Blob URL 로드
+  const loadRepresentativeImage = useCallback(
+    async (file: FileInfo) => {
+      try {
+        const isImage = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+          file.fileExt.toLowerCase().replace(".", "")
+        );
+
+        if (!isImage) {
+          setRepresentativeImageUrl(null);
+          return;
+        }
+
+        // objid가 없거나 유효하지 않으면 로드 중단
+        if (!file.objid || file.objid === "0" || file.objid === "") {
+          console.warn("⚠️ 대표 이미지 로드 실패: objid가 없음", file);
+          setRepresentativeImageUrl(null);
+          return;
+        }
+
+        // 🔑 이미 previewUrl이 설정된 경우 바로 사용 (API 호출 스킵)
+        if (file.previewUrl) {
+          console.log("🖼️ 대표 이미지: previewUrl 사용:", file.previewUrl);
+          setRepresentativeImageUrl(file.previewUrl);
+          return;
+        }
+
+        console.log("🖼️ 대표 이미지 로드 시작:", {
+          objid: file.objid,
+          fileName: file.realFileName,
+        });
+
+        // API 클라이언트를 통해 Blob으로 다운로드 (인증 토큰 포함)
+        // 🔑 download 대신 preview 사용 (공개 접근)
+        const response = await apiClient.get(`/files/preview/${file.objid}`, {
+          params: {
+            serverFilename: file.savedFileName,
+          },
+          responseType: "blob",
+        });
+
+        // Blob URL 생성
+        const blob = new Blob([response.data]);
+        const url = window.URL.createObjectURL(blob);
+        
+        // 이전 URL 정리
+        if (representativeImageUrl) {
+          window.URL.revokeObjectURL(representativeImageUrl);
+        }
+
+        setRepresentativeImageUrl(url);
+        console.log("✅ 대표 이미지 로드 성공:", url);
+      } catch (error: any) {
+        console.error("❌ 대표 이미지 로드 실패:", {
+          file: file.realFileName,
+          objid: file.objid,
+          error: error?.response?.status || error?.message,
+        });
+        setRepresentativeImageUrl(null);
+      }
+    },
+    [representativeImageUrl],
+  );
+
+  // 대표 이미지 설정 핸들러
+  const handleSetRepresentative = useCallback(
+    async (file: FileInfo) => {
+      try {
+        // API 호출하여 DB에 대표 파일 설정
+        const { setRepresentativeFile } = await import("@/lib/api/file");
+        await setRepresentativeFile(file.objid);
+
+        // 상태 업데이트
+        const updatedFiles = uploadedFiles.map((f) => ({
+          ...f,
+          isRepresentative: f.objid === file.objid,
+        }));
+
+        setUploadedFiles(updatedFiles);
+
+        // 대표 이미지 로드
+        loadRepresentativeImage(file);
+
+        console.log("✅ 대표 파일 설정 완료:", {
+          componentId: component.id,
+          representativeFile: file.realFileName,
+          objid: file.objid,
+        });
+      } catch (e) {
+        console.error("❌ 대표 파일 설정 실패:", e);
+      }
+    },
+    [uploadedFiles, component.id, loadRepresentativeImage]
+  );
+
+  // uploadedFiles 변경 시 대표 이미지 로드
+  useEffect(() => {
+    const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+    if (representativeFile) {
+      loadRepresentativeImage(representativeFile);
+    } else {
+      setRepresentativeImageUrl(null);
+    }
+
+    // 컴포넌트 언마운트 시 Blob URL 정리
+    return () => {
+      if (representativeImageUrl) {
+        window.URL.revokeObjectURL(representativeImageUrl);
+      }
+    };
+  }, [uploadedFiles]);
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      console.log("🎯 드래그 오버 이벤트 감지:", {
+        readonly: safeComponentConfig.readonly,
+        disabled: safeComponentConfig.disabled,
+        dragOver: dragOver,
+      });
+
+      e.preventDefault();
+      e.stopPropagation();
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        setDragOver(true);
+        console.log("✅ 드래그 오버 활성화");
+      } else {
+        console.log("❌ 드래그 차단됨: readonly 또는 disabled");
+      }
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled, dragOver],
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+          handleFileUpload(files);
+        }
+      }
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled, handleFileUpload],
+  );
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      console.log("🖱️ 파일 업로드 영역 클릭:", {
+        readonly: safeComponentConfig.readonly,
+        disabled: safeComponentConfig.disabled,
+        hasHandleFileSelect: !!handleFileSelect,
+      });
+
+      e.preventDefault();
+      e.stopPropagation();
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        console.log("✅ 파일 선택 함수 호출");
+        handleFileSelect();
+      } else {
+        console.log("❌ 클릭 차단됨: readonly 또는 disabled");
+      }
+      onClick?.();
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled, handleFileSelect, onClick],
+  );
+
+  return (
+    <div
+      style={{
+        ...componentStyle,
+        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
+        height: "100%", // 🆕 부모 컨테이너 높이에 맞춤
+        border: "none !important",
+        boxShadow: "none !important",
+        outline: "none !important",
+        backgroundColor: "transparent !important",
+        padding: "0px !important",
+        borderRadius: "0px !important",
+        marginBottom: "8px !important",
+      }}
+      className={`${className} file-upload-container`}
+    >
+      {/* 라벨 렌더링 */}
+      {component.label && component.style?.labelDisplay !== false && (
+        <label
+          style={{
+            position: "absolute",
+            top: "-20px",
+            left: "0px",
+            fontSize: "12px",
+            color: "rgb(107, 114, 128)",
+            fontWeight: "400",
+            background: "transparent !important",
+            border: "none !important",
+            boxShadow: "none !important",
+            outline: "none !important",
+            padding: "0px !important",
+            margin: "0px !important"
+          }}
+        >
+          {component.label}
+          {component.required && (
+            <span style={{ color: "#ef4444" }}>*</span>
+          )}
+        </label>
+      )}
+
+      <div
+        className="border-border bg-card relative flex h-full w-full flex-col rounded-lg border overflow-hidden"
+      >
+        {/* 대표 이미지 전체 화면 표시 */}
+        {uploadedFiles.length > 0 ? (() => {
+          const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+          const isImage = representativeFile && ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+            representativeFile.fileExt.toLowerCase().replace(".", "")
+          );
+
+          return (
+            <>
+              {isImage && representativeImageUrl ? (
+                <div className="relative h-full w-full flex items-center justify-center bg-muted/10">
+                  <img
+                    src={representativeImageUrl}
+                    alt={representativeFile.realFileName}
+                    className="h-full w-full object-contain"
+                  />
+                </div>
+              ) : isImage && !representativeImageUrl ? (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
+                  <p className="text-sm text-muted-foreground">이미지 로딩 중...</p>
+                </div>
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  {getFileIcon(representativeFile.fileExt)}
+                  <p className="mt-3 text-sm font-medium text-center px-4">
+                    {representativeFile.realFileName}
+                  </p>
+                  <Badge variant="secondary" className="mt-2">
+                    대표 파일
+                  </Badge>
+                </div>
+              )}
+              
+              {/* 우측 하단 자세히보기 버튼 */}
+              <div className="absolute bottom-3 right-3">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="h-8 px-3 text-xs shadow-md"
+                  onClick={() => setIsFileManagerOpen(true)}
+                >
+                  자세히보기 ({uploadedFiles.length})
+                </Button>
+              </div>
+            </>
+          );
+        })() : (
+          <div className="flex h-full w-full flex-col items-center justify-center text-muted-foreground">
+            <File className="mb-3 h-12 w-12" />
+            <p className="text-sm font-medium">업로드된 파일이 없습니다</p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-4 h-8 px-3 text-xs"
+              onClick={() => setIsFileManagerOpen(true)}
+            >
+              파일 업로드
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* 파일뷰어 모달 */}
+      <FileViewerModal
+        file={viewerFile}
+        isOpen={isViewerOpen}
+        onClose={handleViewerClose}
+        onDownload={handleFileDownload}
+        onDelete={!isDesignMode ? handleFileDelete : undefined}
+      />
+
+      {/* 파일 관리 모달 */}
+      <FileManagerModal
+        isOpen={isFileManagerOpen}
+        onClose={() => setIsFileManagerOpen(false)}
+        uploadedFiles={uploadedFiles}
+        onFileUpload={handleFileUpload}
+        onFileDownload={handleFileDownload}
+        onFileDelete={handleFileDelete}
+        onFileView={handleFileView}
+        onSetRepresentative={handleSetRepresentative}
+        config={safeComponentConfig}
+        isDesignMode={isDesignMode}
+      />
+    </div>
+  );
+};
+
+export { FileUploadComponent };
+export default FileUploadComponent;
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx
new file mode 100644
index 00000000..cafe7ac2
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import React, { useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { FileUploadConfig } from "./types";
+import { V2FileUploadDefaultConfig } from "./config";
+
+export interface FileUploadConfigPanelProps {
+  config: FileUploadConfig;
+  onChange: (config: Partial<FileUploadConfig>) => void;
+  screenTableName?: string;
+}
+
+/**
+ * V2 FileUpload 설정 패널
+ * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
+ */
+export const FileUploadConfigPanel: React.FC<FileUploadConfigPanelProps> = ({
+  config: propConfig,
+  onChange,
+  screenTableName,
+}) => {
+  // config 안전하게 초기화 (useMemo)
+  const config = useMemo(() => ({
+    ...V2FileUploadDefaultConfig,
+    ...propConfig,
+  }), [propConfig]);
+
+  // 핸들러
+  const handleChange = useCallback(<K extends keyof FileUploadConfig>(
+    key: K, 
+    value: FileUploadConfig[K]
+  ) => {
+    onChange({ [key]: value });
+  }, [onChange]);
+
+  // 파일 크기를 MB 단위로 변환
+  const maxSizeMB = useMemo(() => {
+    return (config.maxSize || 10 * 1024 * 1024) / (1024 * 1024);
+  }, [config.maxSize]);
+
+  const handleMaxSizeChange = useCallback((value: string) => {
+    const mb = parseFloat(value) || 10;
+    handleChange("maxSize", mb * 1024 * 1024);
+  }, [handleChange]);
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="text-sm font-medium text-muted-foreground">
+        V2 파일 업로드 설정
+      </div>
+
+      <Separator />
+
+      {/* 기본 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          기본 설정
+        </Label>
+        
+        <div className="space-y-2">
+          <Label htmlFor="placeholder" className="text-xs">플레이스홀더</Label>
+          <Input
+            id="placeholder"
+            value={config.placeholder || ""}
+            onChange={(e) => handleChange("placeholder", e.target.value)}
+            placeholder="파일을 선택하세요"
+            className="h-8 text-xs"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="accept" className="text-xs">허용 파일 형식</Label>
+          <Select
+            value={config.accept || "*/*"}
+            onValueChange={(value) => handleChange("accept", value)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="파일 형식 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="*/*">모든 파일</SelectItem>
+              <SelectItem value="image/*">이미지만</SelectItem>
+              <SelectItem value=".pdf,.doc,.docx,.xls,.xlsx">문서만</SelectItem>
+              <SelectItem value="image/*,.pdf">이미지 + PDF</SelectItem>
+              <SelectItem value=".zip,.rar,.7z">압축 파일만</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-2">
+            <Label htmlFor="maxSize" className="text-xs">최대 크기 (MB)</Label>
+            <Input
+              id="maxSize"
+              type="number"
+              min={1}
+              max={100}
+              value={maxSizeMB}
+              onChange={(e) => handleMaxSizeChange(e.target.value)}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="maxFiles" className="text-xs">최대 파일 수</Label>
+            <Input
+              id="maxFiles"
+              type="number"
+              min={1}
+              max={50}
+              value={config.maxFiles || 10}
+              onChange={(e) => handleChange("maxFiles", parseInt(e.target.value) || 10)}
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 동작 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          동작 설정
+        </Label>
+        
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="multiple"
+            checked={config.multiple !== false}
+            onCheckedChange={(checked) => handleChange("multiple", checked as boolean)}
+          />
+          <Label htmlFor="multiple" className="text-xs">다중 파일 선택 허용</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allowDelete"
+            checked={config.allowDelete !== false}
+            onCheckedChange={(checked) => handleChange("allowDelete", checked as boolean)}
+          />
+          <Label htmlFor="allowDelete" className="text-xs">파일 삭제 허용</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allowDownload"
+            checked={config.allowDownload !== false}
+            onCheckedChange={(checked) => handleChange("allowDownload", checked as boolean)}
+          />
+          <Label htmlFor="allowDownload" className="text-xs">파일 다운로드 허용</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 표시 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          표시 설정
+        </Label>
+        
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showPreview"
+            checked={config.showPreview !== false}
+            onCheckedChange={(checked) => handleChange("showPreview", checked as boolean)}
+          />
+          <Label htmlFor="showPreview" className="text-xs">미리보기 표시</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showFileList"
+            checked={config.showFileList !== false}
+            onCheckedChange={(checked) => handleChange("showFileList", checked as boolean)}
+          />
+          <Label htmlFor="showFileList" className="text-xs">파일 목록 표시</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showFileSize"
+            checked={config.showFileSize !== false}
+            onCheckedChange={(checked) => handleChange("showFileSize", checked as boolean)}
+          />
+          <Label htmlFor="showFileSize" className="text-xs">파일 크기 표시</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 상태 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          상태 설정
+        </Label>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="required"
+            checked={config.required || false}
+            onCheckedChange={(checked) => handleChange("required", checked as boolean)}
+          />
+          <Label htmlFor="required" className="text-xs">필수 입력</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="readonly"
+            checked={config.readonly || false}
+            onCheckedChange={(checked) => handleChange("readonly", checked as boolean)}
+          />
+          <Label htmlFor="readonly" className="text-xs">읽기 전용</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="disabled"
+            checked={config.disabled || false}
+            onCheckedChange={(checked) => handleChange("disabled", checked as boolean)}
+          />
+          <Label htmlFor="disabled" className="text-xs">비활성화</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 스타일 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          스타일 설정
+        </Label>
+
+        <div className="space-y-2">
+          <Label htmlFor="variant" className="text-xs">스타일 변형</Label>
+          <Select
+            value={config.variant || "default"}
+            onValueChange={(value) => handleChange("variant", value as "default" | "outlined" | "filled")}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="스타일 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">기본</SelectItem>
+              <SelectItem value="outlined">테두리</SelectItem>
+              <SelectItem value="filled">채움</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="size" className="text-xs">크기</Label>
+          <Select
+            value={config.size || "md"}
+            onValueChange={(value) => handleChange("size", value as "sm" | "md" | "lg")}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="크기 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="sm">작게</SelectItem>
+              <SelectItem value="md">보통</SelectItem>
+              <SelectItem value="lg">크게</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* 도움말 */}
+      <div className="space-y-2">
+        <Label htmlFor="helperText" className="text-xs">도움말</Label>
+        <Input
+          id="helperText"
+          value={config.helperText || ""}
+          onChange={(e) => handleChange("helperText", e.target.value)}
+          placeholder="파일 업로드에 대한 안내 문구"
+          className="h-8 text-xs"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
new file mode 100644
index 00000000..9eb0edeb
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
@@ -0,0 +1,543 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { FileInfo } from "./types";
+import { Download, X, AlertTriangle, FileText, Trash2, ExternalLink } from "lucide-react";
+import { formatFileSize } from "@/lib/utils";
+import { API_BASE_URL } from "@/lib/api/client";
+
+// Office 문서 렌더링을 위한 CDN 라이브러리 로드
+const loadOfficeLibrariesFromCDN = async () => {
+  if (typeof window === "undefined") return { XLSX: null, mammoth: null };
+
+  try {
+    // XLSX 라이브러리가 이미 로드되어 있는지 확인
+    if (!(window as any).XLSX) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+
+    // mammoth 라이브러리가 이미 로드되어 있는지 확인
+    if (!(window as any).mammoth) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js";
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+
+    return {
+      XLSX: (window as any).XLSX,
+      mammoth: (window as any).mammoth,
+    };
+  } catch (error) {
+    console.error("Office 라이브러리 CDN 로드 실패:", error);
+    return { XLSX: null, mammoth: null };
+  }
+};
+
+interface FileViewerModalProps {
+  file: FileInfo | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onDownload?: (file: FileInfo) => void;
+  onDelete?: (file: FileInfo) => void;
+}
+
+/**
+ * 파일 뷰어 모달 컴포넌트
+ */
+export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen, onClose, onDownload, onDelete }) => {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [renderedContent, setRenderedContent] = useState<string | null>(null);
+
+  // Office 문서를 CDN 라이브러리로 렌더링하는 함수
+  const renderOfficeDocument = async (blob: Blob, fileExt: string, fileName: string) => {
+    try {
+      setIsLoading(true);
+
+      // CDN에서 라이브러리 로드
+      const { XLSX, mammoth } = await loadOfficeLibrariesFromCDN();
+
+      if (fileExt === "docx" && mammoth) {
+        // Word 문서 렌더링
+        const arrayBuffer = await blob.arrayBuffer();
+        const result = await mammoth.convertToHtml({ arrayBuffer });
+
+        const htmlContent = `
+          <div>
+            <h4 style="margin: 0 0 15px 0; color: #333; font-size: 16px;">📄 ${fileName}</h4>
+            <div class="word-content" style="max-height: 500px; overflow-y: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 5px; line-height: 1.6; font-family: 'Times New Roman', serif;">
+              ${result.value || "내용을 읽을 수 없습니다."}
+            </div>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (["xlsx", "xls"].includes(fileExt) && XLSX) {
+        // Excel 문서 렌더링
+        const arrayBuffer = await blob.arrayBuffer();
+        const workbook = XLSX.read(arrayBuffer, { type: "array" });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+
+        const html = XLSX.utils.sheet_to_html(worksheet, {
+          table: { className: "excel-table" },
+        });
+
+        const htmlContent = `
+          <div>
+            <h4 style="margin: 0 0 10px 0; color: #333; font-size: 16px;">📊 ${fileName}</h4>
+            <p style="margin: 0 0 15px 0; color: #666; font-size: 14px;">시트: ${sheetName}</p>
+            <div style="max-height: 400px; overflow: auto; border: 1px solid #ddd; border-radius: 5px;">
+              <style>
+                .excel-table { border-collapse: collapse; width: 100%; }
+                .excel-table td, .excel-table th { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 12px; }
+                .excel-table th { background-color: #f5f5f5; font-weight: bold; }
+              </style>
+              ${html}
+            </div>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (fileExt === "doc") {
+        // .doc 파일은 .docx로 변환 안내
+        const htmlContent = `
+          <div style="text-align: center; padding: 40px;">
+            <h3 style="color: #333; margin-bottom: 15px;">📄 ${fileName}</h3>
+            <p style="color: #666; margin-bottom: 10px;">.doc 파일은 .docx로 변환 후 업로드해주세요.</p>
+            <p style="color: #666; font-size: 14px;">(.docx 파일만 미리보기 지원)</p>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (["ppt", "pptx"].includes(fileExt)) {
+        // PowerPoint는 미리보기 불가 안내
+        const htmlContent = `
+          <div style="text-align: center; padding: 40px;">
+            <h3 style="color: #333; margin-bottom: 15px;">📑 ${fileName}</h3>
+            <p style="color: #666; margin-bottom: 10px;">PowerPoint 파일은 브라우저에서 미리보기할 수 없습니다.</p>
+            <p style="color: #666; font-size: 14px;">파일을 다운로드하여 확인해주세요.</p>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      }
+
+      return false; // 지원하지 않는 형식
+    } catch (error) {
+      console.error("Office 문서 렌더링 오류:", error);
+
+      const htmlContent = `
+        <div style="color: red; text-align: center; padding: 20px;">
+          Office 문서를 읽을 수 없습니다.<br>
+          파일이 손상되었거나 지원하지 않는 형식일 수 있습니다.
+        </div>
+      `;
+
+      setRenderedContent(htmlContent);
+      return true; // 오류 메시지라도 표시
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 파일이 변경될 때마다 미리보기 URL 생성
+  useEffect(() => {
+    if (!file || !isOpen) {
+      setPreviewUrl(null);
+      setPreviewError(null);
+      setRenderedContent(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setPreviewError(null);
+
+    // 로컬 파일인 경우
+    if (file._file) {
+      const url = URL.createObjectURL(file._file);
+      setPreviewUrl(url);
+      setIsLoading(false);
+
+      return () => URL.revokeObjectURL(url);
+    }
+
+    let cleanup: (() => void) | undefined;
+
+    // 서버 파일인 경우 - 미리보기 API 호출
+    const generatePreviewUrl = async () => {
+      try {
+        const fileExt = file.fileExt.toLowerCase();
+
+        // 미리보기 지원 파일 타입 정의
+        const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
+        const documentExtensions = [
+          "pdf",
+          "doc",
+          "docx",
+          "xls",
+          "xlsx",
+          "ppt",
+          "pptx",
+          "rtf",
+          "odt",
+          "ods",
+          "odp",
+          "hwp",
+          "hwpx",
+          "hwpml",
+          "hcdt",
+          "hpt",
+          "pages",
+          "numbers",
+          "keynote",
+        ];
+        const textExtensions = ["txt", "md", "json", "xml", "csv"];
+        const mediaExtensions = ["mp4", "webm", "ogg", "mp3", "wav"];
+
+        const supportedExtensions = [...imageExtensions, ...documentExtensions, ...textExtensions, ...mediaExtensions];
+
+        if (supportedExtensions.includes(fileExt)) {
+          // 이미지나 PDF는 인증된 요청으로 Blob 생성
+          if (imageExtensions.includes(fileExt) || fileExt === "pdf") {
+            try {
+              // 인증된 요청으로 파일 데이터 가져오기
+              const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
+                headers: {
+                  Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+                },
+              });
+
+              if (response.ok) {
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+                setPreviewUrl(blobUrl);
+
+                // 컴포넌트 언마운트 시 URL 정리를 위해 cleanup 함수 저장
+                cleanup = () => URL.revokeObjectURL(blobUrl);
+              } else {
+                throw new Error(`HTTP ${response.status}`);
+              }
+            } catch (error) {
+              console.error("파일 미리보기 로드 실패:", error);
+              setPreviewError("파일을 불러올 수 없습니다. 권한을 확인해주세요.");
+            }
+          } else if (documentExtensions.includes(fileExt)) {
+            // Office 문서는 OnlyOffice 또는 안정적인 뷰어 사용
+            try {
+              const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
+                headers: {
+                  Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+                },
+              });
+
+              if (response.ok) {
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+
+                // Office 문서를 위한 특별한 처리 - CDN 라이브러리 사용
+                if (["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(fileExt)) {
+                  // CDN 라이브러리로 클라이언트 사이드 렌더링 시도
+                  try {
+                    const renderSuccess = await renderOfficeDocument(blob, fileExt, file.realFileName);
+
+                    if (!renderSuccess) {
+                      // 렌더링 실패 시 Blob URL 사용
+                      setPreviewUrl(blobUrl);
+                    }
+                  } catch (error) {
+                    console.error("Office 문서 렌더링 중 오류:", error);
+                    // 오류 발생 시 Blob URL 사용
+                    setPreviewUrl(blobUrl);
+                  }
+                } else {
+                  // 기타 문서는 직접 Blob URL 사용
+                  setPreviewUrl(blobUrl);
+                }
+
+                return () => URL.revokeObjectURL(blobUrl); // Cleanup function
+              } else {
+                throw new Error(`HTTP ${response.status}`);
+              }
+            } catch (error) {
+              console.error("Office 문서 로드 실패:", error);
+              // 오류 발생 시 다운로드 옵션 제공
+              setPreviewError(`${fileExt.toUpperCase()} 문서를 미리보기할 수 없습니다. 다운로드하여 확인해주세요.`);
+            }
+          } else {
+            // 기타 파일은 다운로드 URL 사용
+            const url = `${API_BASE_URL.replace("/api", "")}/api/files/download/${file.objid}`;
+            setPreviewUrl(url);
+          }
+        } else {
+          // 지원하지 않는 파일 타입
+          setPreviewError(`${file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.`);
+        }
+      } catch (error) {
+        console.error("미리보기 URL 생성 오류:", error);
+        setPreviewError("미리보기를 불러오는데 실패했습니다.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    generatePreviewUrl();
+
+    // cleanup 함수 반환
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [file, isOpen]);
+
+  if (!file) return null;
+
+  // 파일 타입별 미리보기 컴포넌트
+  const renderPreview = () => {
+    if (isLoading) {
+      return (
+        <div className="flex h-96 items-center justify-center">
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+        </div>
+      );
+    }
+
+    if (previewError) {
+      return (
+        <div className="flex h-96 flex-col items-center justify-center">
+          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <p className="mb-2 text-lg font-medium">미리보기 불가</p>
+          <p className="text-center text-sm">{previewError}</p>
+          <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
+            <Download className="mr-2 h-4 w-4" />
+            파일 다운로드
+          </Button>
+        </div>
+      );
+    }
+
+    const fileExt = file.fileExt.toLowerCase();
+
+    // 이미지 파일
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(fileExt)) {
+      return (
+        <div className="flex max-h-96 items-center justify-center overflow-hidden">
+          <img
+            src={previewUrl || ""}
+            alt={file.realFileName}
+            className="max-h-full max-w-full rounded-lg object-contain shadow-lg"
+            onError={(e) => {
+              console.error("이미지 로드 오류:", previewUrl, e);
+              setPreviewError("이미지를 불러올 수 없습니다. 파일이 손상되었거나 서버에서 접근할 수 없습니다.");
+            }}
+            onLoad={() => {
+              console.log("이미지 로드 성공:", previewUrl);
+            }}
+          />
+        </div>
+      );
+    }
+
+    // 텍스트 파일
+    if (["txt", "md", "json", "xml", "csv"].includes(fileExt)) {
+      return (
+        <div className="h-96 overflow-auto">
+          <iframe
+            src={previewUrl || ""}
+            className="h-full w-full rounded-lg border"
+            onError={() => setPreviewError("텍스트 파일을 불러올 수 없습니다.")}
+          />
+        </div>
+      );
+    }
+
+    // PDF 파일 - 브라우저 기본 뷰어 사용
+    if (fileExt === "pdf") {
+      return (
+        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+          <object
+            data={previewUrl || ""}
+            type="application/pdf"
+            className="h-full w-full rounded-lg"
+            title="PDF Viewer"
+          >
+            <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
+              <div className="flex h-full flex-col items-center justify-center p-8">
+                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
+                <p className="mb-4 text-center text-sm text-gray-600">
+                  브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
+                </p>
+                <Button variant="outline" onClick={() => onDownload?.(file)}>
+                  <Download className="mr-2 h-4 w-4" />
+                  PDF 다운로드
+                </Button>
+              </div>
+            </iframe>
+          </object>
+        </div>
+      );
+    }
+
+    // Office 문서 - 모든 Office 문서는 다운로드 권장
+    if (
+      [
+        "doc",
+        "docx",
+        "xls",
+        "xlsx",
+        "ppt",
+        "pptx",
+        "hwp",
+        "hwpx",
+        "hwpml",
+        "hcdt",
+        "hpt",
+        "pages",
+        "numbers",
+        "keynote",
+      ].includes(fileExt)
+    ) {
+      // Office 문서 안내 메시지 표시
+      return (
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-blue-500" />
+          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+            {fileExt === "docx" || fileExt === "doc"
+              ? "Word 문서"
+              : fileExt === "xlsx" || fileExt === "xls"
+                ? "Excel 문서"
+                : fileExt === "pptx" || fileExt === "ppt"
+                  ? "PowerPoint 문서"
+                  : "Office 문서"}
+            는 브라우저에서 미리보기가 지원되지 않습니다.
+            <br />
+            다운로드하여 확인해주세요.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={() => onDownload?.(file)} size="lg" className="shadow-md">
+              <Download className="mr-2 h-5 w-5" />
+              다운로드하여 열기
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    // 비디오 파일
+    if (["mp4", "webm", "ogg"].includes(fileExt)) {
+      return (
+        <div className="flex items-center justify-center">
+          <video controls className="max-h-96 w-full" onError={() => setPreviewError("비디오를 재생할 수 없습니다.")}>
+            <source src={previewUrl || ""} type={`video/${fileExt}`} />
+          </video>
+        </div>
+      );
+    }
+
+    // 오디오 파일
+    if (["mp3", "wav", "ogg"].includes(fileExt)) {
+      return (
+        <div className="flex h-96 flex-col items-center justify-center">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
+            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <audio controls className="w-full max-w-md" onError={() => setPreviewError("오디오를 재생할 수 없습니다.")}>
+            <source src={previewUrl || ""} type={`audio/${fileExt}`} />
+          </audio>
+        </div>
+      );
+    }
+
+    // 기타 파일 타입
+    return (
+      <div className="flex h-96 flex-col items-center justify-center">
+        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <p className="mb-2 text-lg font-medium">미리보기 불가</p>
+        <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
+        <Button variant="outline" onClick={() => onDownload?.(file)}>
+          <Download className="mr-2 h-4 w-4" />
+          파일 다운로드
+        </Button>
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => {}}>
+      <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden [&>button]:hidden">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <DialogTitle className="truncate text-lg font-semibold">{file.realFileName}</DialogTitle>
+              <Badge variant="secondary" className="text-xs">
+                {file.fileExt.toUpperCase()}
+              </Badge>
+            </div>
+          </div>
+          <DialogDescription>
+            파일 크기: {formatFileSize(file.fileSize || file.size || 0)} | 파일 형식: {file.fileExt.toUpperCase()}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden">{renderPreview()}</div>
+
+        {/* 파일 정보 및 액션 버튼 */}
+        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+          <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
+          {(file.uploadedAt || file.regdate) && (
+            <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
+          )}
+        </div>
+
+        <div className="flex justify-end space-x-2 border-t pt-4">
+          <Button variant="outline" size="sm" onClick={() => onDownload?.(file)}>
+            <Download className="mr-2 h-4 w-4" />
+            다운로드
+          </Button>
+          {onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              onClick={() => onDelete(file)}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              삭제
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={onClose}>
+            <X className="mr-2 h-4 w-4" />
+            닫기
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx b/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx
new file mode 100644
index 00000000..5ca1df40
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2FileUploadDefinition } from "./index";
+import { FileUploadComponent } from "./FileUploadComponent";
+
+/**
+ * V2 FileUpload 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2FileUploadRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2FileUploadDefinition;
+
+  render(): React.ReactElement {
+    return <FileUploadComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 컴포넌트별 특화 메서드들
+   */
+  
+  // file 타입 특화 속성 처리
+  protected getFileUploadProps() {
+    const baseProps = this.getWebTypeProps();
+    
+    // file 타입에 특화된 추가 속성들
+    return {
+      ...baseProps,
+      // 여기에 file 타입 특화 속성들 추가
+    };
+  }
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+
+  // 포커스 처리
+  protected handleFocus = () => {
+    // 포커스 로직
+  };
+
+  // 블러 처리
+  protected handleBlur = () => {
+    // 블러 로직
+  };
+}
+
+// 자동 등록 실행
+V2FileUploadRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2FileUploadRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-file-upload/config.ts b/frontend/lib/registry/components/v2-file-upload/config.ts
new file mode 100644
index 00000000..4d7c65e6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/config.ts
@@ -0,0 +1,62 @@
+"use client";
+
+import { FileUploadConfig } from "./types";
+
+/**
+ * V2 FileUpload 컴포넌트 기본 설정
+ */
+export const V2FileUploadDefaultConfig: FileUploadConfig = {
+  placeholder: "파일을 선택하세요",
+  multiple: true,
+  accept: "*/*",
+  maxSize: 10 * 1024 * 1024, // 10MB
+  maxFiles: 10,
+  
+  // 공통 기본값
+  disabled: false,
+  required: false,
+  readonly: false,
+  variant: "default",
+  size: "md",
+  
+  // V2 추가 설정 기본값
+  showPreview: true,
+  showFileList: true,
+  showFileSize: true,
+  allowDelete: true,
+  allowDownload: true,
+};
+
+/**
+ * V2 FileUpload 컴포넌트 설정 스키마
+ * 유효성 검사 및 타입 체크에 사용
+ */
+export const V2FileUploadConfigSchema = {
+  placeholder: { type: "string", default: "파일을 선택하세요" },
+  multiple: { type: "boolean", default: true },
+  accept: { type: "string", default: "*/*" },
+  maxSize: { type: "number", default: 10 * 1024 * 1024 },
+  maxFiles: { type: "number", default: 10 },
+  
+  // 공통 스키마
+  disabled: { type: "boolean", default: false },
+  required: { type: "boolean", default: false },
+  readonly: { type: "boolean", default: false },
+  variant: { 
+    type: "enum", 
+    values: ["default", "outlined", "filled"], 
+    default: "default" 
+  },
+  size: { 
+    type: "enum", 
+    values: ["sm", "md", "lg"], 
+    default: "md" 
+  },
+  
+  // V2 추가 설정 스키마
+  showPreview: { type: "boolean", default: true },
+  showFileList: { type: "boolean", default: true },
+  showFileSize: { type: "boolean", default: true },
+  allowDelete: { type: "boolean", default: true },
+  allowDownload: { type: "boolean", default: true },
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/index.ts b/frontend/lib/registry/components/v2-file-upload/index.ts
new file mode 100644
index 00000000..0bf109bb
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/index.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { FileUploadComponent } from "./FileUploadComponent";
+import { FileUploadConfigPanel } from "./FileUploadConfigPanel";
+import { FileUploadConfig } from "./types";
+
+/**
+ * V2 FileUpload 컴포넌트 정의
+ * 화면관리 전용 V2 파일 업로드 컴포넌트입니다
+ */
+export const V2FileUploadDefinition = createComponentDefinition({
+  id: "v2-file-upload",
+  name: "파일 업로드",
+  nameEng: "V2 FileUpload Component",
+  description: "V2 파일 업로드를 위한 파일 선택 컴포넌트",
+  category: ComponentCategory.INPUT,
+  webType: "file",
+  component: FileUploadComponent,
+  defaultConfig: {
+    placeholder: "파일을 선택하세요",
+    multiple: true,
+    accept: "*/*",
+    maxSize: 10 * 1024 * 1024, // 10MB
+  },
+  defaultSize: { width: 350, height: 240 },
+  configPanel: FileUploadConfigPanel,
+  icon: "Upload",
+  tags: ["file", "upload", "attachment", "v2"],
+  version: "2.0.0",
+  author: "개발팀",
+  documentation: "https://docs.example.com/components/v2-file-upload",
+});
+
+// 타입 내보내기
+export type { FileUploadConfig, FileInfo, FileUploadProps, FileUploadStatus, FileUploadResponse } from "./types";
+
+// 컴포넌트 내보내기
+export { FileUploadComponent } from "./FileUploadComponent";
+export { V2FileUploadRenderer } from "./V2FileUploadRenderer";
+
+// 기본 export
+export default V2FileUploadDefinition;
diff --git a/frontend/lib/registry/components/v2-file-upload/types.ts b/frontend/lib/registry/components/v2-file-upload/types.ts
new file mode 100644
index 00000000..9147b88d
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/types.ts
@@ -0,0 +1,114 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * 파일 정보 인터페이스 (AttachedFileInfo와 호환)
+ */
+export interface FileInfo {
+  // AttachedFileInfo 기본 속성들
+  objid: string;
+  savedFileName: string;
+  realFileName: string;
+  fileSize: number;
+  fileExt: string;
+  filePath: string;
+  docType?: string;
+  docTypeName?: string;
+  targetObjid: string;
+  parentTargetObjid?: string;
+  companyCode?: string;
+  writer?: string;
+  regdate?: string;
+  status?: string;
+
+  // 추가 호환성 속성들
+  path?: string; // filePath와 동일
+  name?: string; // realFileName과 동일
+  id?: string; // objid와 동일
+  size?: number; // fileSize와 동일
+  type?: string; // docType과 동일
+  uploadedAt?: string; // regdate와 동일
+  _file?: File; // 로컬 파일 객체 (업로드 전)
+  
+  // 대표 이미지 설정
+  isRepresentative?: boolean; // 대표 이미지로 설정 여부
+}
+
+/**
+ * V2 FileUpload 컴포넌트 설정 타입
+ */
+export interface FileUploadConfig extends ComponentConfig {
+  // file 관련 설정
+  placeholder?: string;
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number; // bytes
+  maxFiles?: number; // 최대 파일 수
+  
+  // 공통 설정
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  helperText?: string;
+  
+  // 스타일 관련
+  variant?: "default" | "outlined" | "filled";
+  size?: "sm" | "md" | "lg";
+  
+  // V2 추가 설정
+  showPreview?: boolean; // 미리보기 표시 여부
+  showFileList?: boolean; // 파일 목록 표시 여부
+  showFileSize?: boolean; // 파일 크기 표시 여부
+  allowDelete?: boolean; // 삭제 허용 여부
+  allowDownload?: boolean; // 다운로드 허용 여부
+  
+  // 이벤트 관련
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onFileUpload?: (files: FileInfo[]) => void;
+  onFileDelete?: (fileId: string) => void;
+  onFileDownload?: (file: FileInfo) => void;
+}
+
+/**
+ * V2 FileUpload 컴포넌트 Props 타입
+ */
+export interface FileUploadProps {
+  id?: string;
+  name?: string;
+  value?: any;
+  config?: FileUploadConfig;
+  className?: string;
+  style?: React.CSSProperties;
+  
+  // 파일 관련
+  uploadedFiles?: FileInfo[];
+  
+  // 이벤트 핸들러
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onFileUpload?: (files: FileInfo[]) => void;
+  onFileDelete?: (fileId: string) => void;
+  onFileDownload?: (file: FileInfo) => void;
+}
+
+/**
+ * 파일 업로드 상태 타입
+ */
+export type FileUploadStatus = 'idle' | 'uploading' | 'success' | 'error';
+
+/**
+ * 파일 업로드 응답 타입
+ */
+export interface FileUploadResponse {
+  success: boolean;
+  data?: FileInfo[];
+  files?: FileInfo[];
+  message?: string;
+  error?: string;
+}
diff --git a/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
index af923ec3..f579ca1e 100644
--- a/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
+++ b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
@@ -30,6 +30,15 @@ export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
     const columnName = component.columnName;
     const tableName = component.tableName || this.props.tableName;
 
+    // 🔍 디버깅: 컴포넌트 정보 로깅
+    console.log("📸 [V2MediaRenderer] 컴포넌트 정보:", {
+      componentId: component.id,
+      columnName: columnName,
+      tableName: tableName,
+      formDataId: formData?.id,
+      formDataTableName: formData?.tableName,
+    });
+
     // V1 file-upload에서 사용하는 형태로 설정 매핑
     const mediaType = config.mediaType || config.type || this.getMediaTypeFromWebType(component.webType);
     
@@ -58,17 +67,14 @@ export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
       componentConfig: legacyComponentConfig,
     };
 
-    // onFormDataChange 래퍼: 레거시 컴포넌트는 객체를 전달하므로 변환 필요
-    const handleFormDataChange = (data: any) => {
+    // onFormDataChange 래퍼: FileUploadComponent는 (fieldName, value) 형태로 호출함
+    const handleFormDataChange = (fieldName: string, value: any) => {
       if (onFormDataChange) {
-        // 레거시 컴포넌트는 { [columnName]: value } 형태로 전달
-        // 부모는 (fieldName, value) 형태를 기대
-        Object.entries(data).forEach(([key, value]) => {
-          // __attachmentsUpdate 같은 메타 데이터는 건너뛰기
-          if (!key.startsWith("__")) {
-            onFormDataChange(key, value);
-          }
-        });
+        // 메타 데이터(__로 시작하는 키)는 건너뛰기
+        if (!fieldName.startsWith("__")) {
+          console.log("📸 [V2MediaRenderer] formData 업데이트:", { fieldName, value });
+          onFormDataChange(fieldName, value);
+        }
       }
     };
 
diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index 543724b5..7f2f1fa3 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -85,7 +85,7 @@ interface GroupedData {
 // 캐시 및 유틸리티
 // ========================================
 
-const tableColumnCache = new Map<string, { columns: any[]; timestamp: number }>();
+const tableColumnCache = new Map<string, { columns: any[]; inputTypes?: any[]; timestamp: number }>();
 const tableInfoCache = new Map<string, { tables: any[]; timestamp: number }>();
 const TABLE_CACHE_TTL = 5 * 60 * 1000; // 5분
 
@@ -1139,6 +1139,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           });
         }
 
+        // 🔍 디버깅: 캐시 사용 시 로그
+        console.log("📊 [TableListComponent] 캐시에서 inputTypes 로드:", {
+          tableName: tableConfig.selectedTable,
+          cacheKey: cacheKey,
+          hasInputTypes: !!cached.inputTypes,
+          inputTypesLength: cached.inputTypes?.length || 0,
+          imageInputType: inputTypeMap["image"],
+          cacheAge: Date.now() - cached.timestamp,
+        });
+
         cached.columns.forEach((col: any) => {
           labels[col.columnName] = col.displayName || col.comment || col.columnName;
           meta[col.columnName] = {
@@ -1162,6 +1172,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         inputTypeMap[col.columnName] = col.inputType;
       });
 
+      // 🔍 디버깅: inputTypes 확인
+      console.log("📊 [TableListComponent] inputTypes 조회 결과:", {
+        tableName: tableConfig.selectedTable,
+        inputTypes: inputTypes,
+        inputTypeMap: inputTypeMap,
+        imageColumn: inputTypes.find((col: any) => col.columnName === "image"),
+      });
+
       tableColumnCache.set(cacheKey, {
         columns,
         inputTypes,
@@ -4061,19 +4079,44 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
 
+      // 🔍 디버깅: image 컬럼인 경우 로그 출력
+      if (column.columnName === "image") {
+        console.log("🖼️ [formatCellValue] image 컬럼 처리:", {
+          columnName: column.columnName,
+          value: value,
+          meta: meta,
+          inputType: inputType,
+          columnInputType: column.inputType,
+        });
+      }
+
       // 🖼️ 이미지 타입: 작은 썸네일 표시
-      if (inputType === "image" && value && typeof value === "string") {
-        const imageUrl = getFullImageUrl(value);
+      if (inputType === "image" && value) {
+        // value가 objid (숫자 또는 숫자 문자열)인 경우 파일 API URL 사용
+        // 🔑 download 대신 preview 사용 (공개 접근 허용)
+        const strValue = String(value);
+        const isObjid = /^\d+$/.test(strValue);
+        const imageUrl = isObjid
+          ? `/api/files/preview/${strValue}`
+          : getFullImageUrl(strValue);
         return (
-          <img
-            src={imageUrl}
-            alt="이미지"
-            className="h-10 w-10 rounded object-cover"
-            onError={(e) => {
-              e.currentTarget.src =
-                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23f3f4f6'/%3E%3C/svg%3E";
-            }}
-          />
+          <div className="flex justify-center">
+            <img
+              src={imageUrl}
+              alt="이미지"
+              className="h-10 w-10 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+              style={{ maxWidth: "40px", maxHeight: "40px" }}
+              onClick={(e) => {
+                e.stopPropagation();
+                // 이미지 클릭 시 새 탭에서 크게 보기
+                window.open(imageUrl, "_blank");
+              }}
+              onError={(e) => {
+                // 이미지 로드 실패 시 기본 아이콘 표시
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          </div>
         );
       }
 
diff --git a/frontend/lib/utils/webTypeMapping.ts b/frontend/lib/utils/webTypeMapping.ts
index ebff5fb8..5a521e26 100644
--- a/frontend/lib/utils/webTypeMapping.ts
+++ b/frontend/lib/utils/webTypeMapping.ts
@@ -107,18 +107,18 @@ export const WEB_TYPE_V2_MAPPING: Record<string, V2ComponentMapping> = {
     config: { mode: "dropdown", source: "category" },
   },
 
-  // 파일/이미지 → 레거시 file-upload (안정적인 파일 업로드)
+  // 파일/이미지 → V2 파일 업로드
   file: {
-    componentType: "file-upload",
-    config: { maxFileCount: 10, accept: "*/*" },
+    componentType: "v2-file-upload",
+    config: { multiple: true, accept: "*/*", maxFiles: 10 },
   },
   image: {
-    componentType: "file-upload",
-    config: { maxFileCount: 1, accept: "image/*" },
+    componentType: "v2-file-upload",
+    config: { multiple: false, accept: "image/*", maxFiles: 1, showPreview: true },
   },
   img: {
-    componentType: "file-upload",
-    config: { maxFileCount: 1, accept: "image/*" },
+    componentType: "v2-file-upload",
+    config: { multiple: false, accept: "image/*", maxFiles: 1, showPreview: true },
   },
 
   // 버튼은 V2 컴포넌트에서 제외 (기존 버튼 시스템 사용)
@@ -157,9 +157,9 @@ export const WEB_TYPE_COMPONENT_MAPPING: Record<string, string> = {
   code: "v2-select",
   entity: "v2-select",
   category: "v2-select",
-  file: "file-upload",
-  image: "file-upload",
-  img: "file-upload",
+  file: "v2-file-upload",
+  image: "v2-file-upload",
+  img: "v2-file-upload",
   button: "button-primary",
   label: "v2-input",
 };