문서뷰어기능구현

backend-node/src/app.ts

@@ -44,7 +44,14 @@ import entityReferenceRoutes from "./routes/entityReferenceRoutes";
 const app = express();
 
 // 기본 미들웨어
-app.use(helmet());
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
+      "frame-ancestors": ["'self'", "http://localhost:9771", "http://localhost:3000"], // 프론트엔드 도메인 허용
+    },
+  },
+}));
 app.use(compression());
 app.use(express.json({ limit: "10mb" }));
 app.use(express.urlencoded({ extended: true, limit: "10mb" }));

backend-node/src/controllers/fileController.ts

@@ -8,6 +8,9 @@ import { generateUUID } from "../utils/generateId";
 
 const prisma = new PrismaClient();
 
+// 임시 토큰 저장소 (메모리 기반, 실제 운영에서는 Redis 사용 권장)
+const tempTokens = new Map<string, { objid: string; expires: number }>();
+
 // 업로드 디렉토리 설정 (회사별로 분리)
 const baseUploadDir = path.join(process.cwd(), "uploads");
 
@@ -266,9 +269,7 @@ export const uploadFiles = async (
 
       // 회사코드가 *인 경우 company_*로 변환
       const actualCompanyCode = companyCode === "*" ? "company_*" : companyCode;
-      const relativePath = `/${actualCompanyCode}/${dateFolder}/${file.filename}`;
+      
-      const fullFilePath = `/uploads${relativePath}`;
-
       // 임시 파일을 최종 위치로 이동
       const tempFilePath = file.path; // Multer가 저장한 임시 파일 경로
       const finalUploadDir = getCompanyUploadDir(companyCode, dateFolder);
@@ -277,6 +278,10 @@ export const uploadFiles = async (
       // 파일 이동
       fs.renameSync(tempFilePath, finalFilePath);
 
+      // DB에 저장할 경로 (실제 파일 위치와 일치)
+      const relativePath = `/${actualCompanyCode}/${dateFolder}/${file.filename}`;
+      const fullFilePath = `/uploads${relativePath}`;
+
       // attach_file_info 테이블에 저장
       const fileRecord = await prisma.attach_file_info.create({
         data: {
@@ -485,6 +490,133 @@ export const getFileList = async (
   }
 };
 
+/**
+ * 컴포넌트의 템플릿 파일과 데이터 파일을 모두 조회
+ */
+export const getComponentFiles = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { screenId, componentId, tableName, recordId, columnName } = req.query;
+    
+    console.log("📂 [getComponentFiles] API 호출:", {
+      screenId,
+      componentId,
+      tableName,
+      recordId,
+      columnName,
+      user: req.user?.userId
+    });
+
+    if (!screenId || !componentId) {
+      console.log("❌ [getComponentFiles] 필수 파라미터 누락");
+      res.status(400).json({
+        success: false,
+        message: "screenId와 componentId가 필요합니다.",
+      });
+      return;
+    }
+
+    // 1. 템플릿 파일 조회 (화면 설계 시 업로드한 파일들)
+    const templateTargetObjid = `screen_files:${screenId}:${componentId}:${columnName || 'field_1'}`;
+    console.log("🔍 [getComponentFiles] 템플릿 파일 조회:", { templateTargetObjid });
+    
+    // 모든 파일 조회해서 실제 저장된 target_objid 패턴 확인
+    const allFiles = await prisma.attach_file_info.findMany({
+      where: {
+        status: "ACTIVE",
+      },
+      select: {
+        target_objid: true,
+        real_file_name: true,
+        regdate: true,
+      },
+      orderBy: {
+        regdate: "desc",
+      },
+      take: 10,
+    });
+    console.log("🗂️ [getComponentFiles] 최근 저장된 파일들의 target_objid:", allFiles.map(f => ({ target_objid: f.target_objid, name: f.real_file_name })));
+    
+    const templateFiles = await prisma.attach_file_info.findMany({
+      where: {
+        target_objid: templateTargetObjid,
+        status: "ACTIVE",
+      },
+      orderBy: {
+        regdate: "desc",
+      },
+    });
+    
+    console.log("📁 [getComponentFiles] 템플릿 파일 결과:", templateFiles.length);
+
+    // 2. 데이터 파일 조회 (실제 레코드와 연결된 파일들)
+    let dataFiles: any[] = [];
+    if (tableName && recordId && columnName) {
+      const dataTargetObjid = `${tableName}:${recordId}:${columnName}`;
+      dataFiles = await prisma.attach_file_info.findMany({
+        where: {
+          target_objid: dataTargetObjid,
+          status: "ACTIVE",
+        },
+        orderBy: {
+          regdate: "desc",
+        },
+      });
+    }
+
+    // 파일 정보 포맷팅 함수
+    const formatFileInfo = (file: any, isTemplate: boolean = false) => ({
+      objid: file.objid.toString(),
+      savedFileName: file.saved_file_name,
+      realFileName: file.real_file_name,
+      fileSize: Number(file.file_size),
+      fileExt: file.file_ext,
+      filePath: file.file_path,
+      docType: file.doc_type,
+      docTypeName: file.doc_type_name,
+      targetObjid: file.target_objid,
+      parentTargetObjid: file.parent_target_objid,
+      writer: file.writer,
+      regdate: file.regdate?.toISOString(),
+      status: file.status,
+      isTemplate, // 템플릿 파일 여부 표시
+    });
+
+    const formattedTemplateFiles = templateFiles.map(file => formatFileInfo(file, true));
+    const formattedDataFiles = dataFiles.map(file => formatFileInfo(file, false));
+
+    // 3. 전체 파일 목록 (데이터 파일 우선, 없으면 템플릿 파일 표시)
+    const totalFiles = formattedDataFiles.length > 0 
+      ? formattedDataFiles 
+      : formattedTemplateFiles;
+
+    res.json({
+      success: true,
+      templateFiles: formattedTemplateFiles,
+      dataFiles: formattedDataFiles,
+      totalFiles,
+      summary: {
+        templateCount: formattedTemplateFiles.length,
+        dataCount: formattedDataFiles.length,
+        totalCount: totalFiles.length,
+        templateTargetObjid,
+        dataTargetObjid: tableName && recordId && columnName 
+          ? `${tableName}:${recordId}:${columnName}` 
+          : null,
+      },
+    });
+  } catch (error) {
+    console.error("컴포넌트 파일 조회 오류:", error);
+    res.status(500).json({
+      success: false,
+      message: "컴포넌트 파일 조회 중 오류가 발생했습니다.",
+      error: error instanceof Error ? error.message : "알 수 없는 오류",
+    });
+  }
+};
+
 /**
  * 파일 미리보기 (이미지 등)
  */
@@ -512,7 +644,13 @@ export const previewFile = async (
 
     // 파일 경로에서 회사코드와 날짜 폴더 추출
     const filePathParts = fileRecord.file_path!.split("/");
-    const companyCode = filePathParts[2] || "DEFAULT";
+    let companyCode = filePathParts[2] || "DEFAULT";
+    
+    // company_* 처리 (실제 회사 코드로 변환)
+    if (companyCode === "company_*") {
+      companyCode = "company_*"; // 실제 디렉토리명 유지
+    }
+    
     const fileName = fileRecord.saved_file_name!;
 
     // 파일 경로에 날짜 구조가 있는지 확인 (YYYY/MM/DD)
@@ -527,6 +665,17 @@ export const previewFile = async (
     );
     const filePath = path.join(companyUploadDir, fileName);
 
+    console.log("🔍 파일 미리보기 경로 확인:", {
+      objid: objid,
+      filePathFromDB: fileRecord.file_path,
+      companyCode: companyCode,
+      dateFolder: dateFolder,
+      fileName: fileName,
+      companyUploadDir: companyUploadDir,
+      finalFilePath: filePath,
+      fileExists: fs.existsSync(filePath)
+    });
+
     if (!fs.existsSync(filePath)) {
       console.error("❌ 파일 없음:", filePath);
       res.status(404).json({
@@ -615,7 +764,13 @@ export const downloadFile = async (
 
     // 파일 경로에서 회사코드와 날짜 폴더 추출 (예: /uploads/company_*/2025/09/05/timestamp_filename.ext)
     const filePathParts = fileRecord.file_path!.split("/");
-    const companyCode = filePathParts[2] || "DEFAULT"; // /uploads/company_*/2025/09/05/filename.ext에서 company_* 추출
+    let companyCode = filePathParts[2] || "DEFAULT"; // /uploads/company_*/2025/09/05/filename.ext에서 company_* 추출
+    
+    // company_* 처리 (실제 회사 코드로 변환)
+    if (companyCode === "company_*") {
+      companyCode = "company_*"; // 실제 디렉토리명 유지
+    }
+    
     const fileName = fileRecord.saved_file_name!;
 
     // 파일 경로에 날짜 구조가 있는지 확인 (YYYY/MM/DD)
@@ -631,6 +786,17 @@ export const downloadFile = async (
     );
     const filePath = path.join(companyUploadDir, fileName);
 
+    console.log("🔍 파일 다운로드 경로 확인:", {
+      objid: objid,
+      filePathFromDB: fileRecord.file_path,
+      companyCode: companyCode,
+      dateFolder: dateFolder,
+      fileName: fileName,
+      companyUploadDir: companyUploadDir,
+      finalFilePath: filePath,
+      fileExists: fs.existsSync(filePath)
+    });
+
     if (!fs.existsSync(filePath)) {
       console.error("❌ 파일 없음:", filePath);
       res.status(404).json({
@@ -660,5 +826,178 @@ export const downloadFile = async (
   }
 };
 
+/**
+ * Google Docs Viewer용 임시 공개 토큰 생성
+ */
+export const generateTempToken = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { objid } = req.params;
+
+    if (!objid) {
+      res.status(400).json({
+        success: false,
+        message: "파일 ID가 필요합니다.",
+      });
+      return;
+    }
+
+    // 파일 존재 확인
+    const fileRecord = await prisma.attach_file_info.findUnique({
+      where: { objid: objid },
+    });
+
+    if (!fileRecord) {
+      res.status(404).json({
+        success: false,
+        message: "파일을 찾을 수 없습니다.",
+      });
+      return;
+    }
+
+    // 임시 토큰 생성 (30분 유효)
+    const token = generateUUID();
+    const expires = Date.now() + 30 * 60 * 1000; // 30분
+
+    tempTokens.set(token, {
+      objid: objid,
+      expires: expires,
+    });
+
+    // 만료된 토큰 정리 (메모리 누수 방지)
+    const now = Date.now();
+    for (const [key, value] of tempTokens.entries()) {
+      if (value.expires < now) {
+        tempTokens.delete(key);
+      }
+    }
+
+    res.json({
+      success: true,
+      data: {
+        token: token,
+        publicUrl: `${req.protocol}://${req.get("host")}/api/files/public/${token}`,
+        expires: new Date(expires).toISOString(),
+      },
+    });
+  } catch (error) {
+    console.error("❌ 임시 토큰 생성 오류:", error);
+    res.status(500).json({
+      success: false,
+      message: "임시 토큰 생성에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 임시 토큰으로 파일 접근 (인증 불필요)
+ */
+export const getFileByToken = async (req: Request, res: Response) => {
+  try {
+    const { token } = req.params;
+
+    if (!token) {
+      res.status(400).json({
+        success: false,
+        message: "토큰이 필요합니다.",
+      });
+      return;
+    }
+
+    // 토큰 확인
+    const tokenData = tempTokens.get(token);
+    if (!tokenData) {
+      res.status(404).json({
+        success: false,
+        message: "유효하지 않은 토큰입니다.",
+      });
+      return;
+    }
+
+    // 토큰 만료 확인
+    if (tokenData.expires < Date.now()) {
+      tempTokens.delete(token);
+      res.status(410).json({
+        success: false,
+        message: "토큰이 만료되었습니다.",
+      });
+      return;
+    }
+
+    // 파일 정보 조회
+    const fileRecord = await prisma.attach_file_info.findUnique({
+      where: { objid: tokenData.objid },
+    });
+
+    if (!fileRecord) {
+      res.status(404).json({
+        success: false,
+        message: "파일을 찾을 수 없습니다.",
+      });
+      return;
+    }
+
+    // 파일 경로 구성
+    const filePathParts = fileRecord.file_path!.split("/");
+    let companyCode = filePathParts[2] || "DEFAULT";
+    if (companyCode === "company_*") {
+      companyCode = "company_*"; // 실제 디렉토리명 유지
+    }
+    const fileName = fileRecord.saved_file_name!;
+    let dateFolder = "";
+    if (filePathParts.length >= 6) {
+      dateFolder = `${filePathParts[3]}/${filePathParts[4]}/${filePathParts[5]}`;
+    }
+    const companyUploadDir = getCompanyUploadDir(companyCode, dateFolder || undefined);
+    const filePath = path.join(companyUploadDir, fileName);
+
+    // 파일 존재 확인
+    if (!fs.existsSync(filePath)) {
+      res.status(404).json({
+        success: false,
+        message: "실제 파일을 찾을 수 없습니다.",
+      });
+      return;
+    }
+
+    // MIME 타입 설정
+    const ext = path.extname(fileName).toLowerCase();
+    let contentType = "application/octet-stream";
+    
+    const mimeTypes: { [key: string]: string } = {
+      ".pdf": "application/pdf",
+      ".doc": "application/msword",
+      ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      ".xls": "application/vnd.ms-excel",
+      ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      ".ppt": "application/vnd.ms-powerpoint",
+      ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      ".jpg": "image/jpeg",
+      ".jpeg": "image/jpeg",
+      ".png": "image/png",
+      ".gif": "image/gif",
+      ".txt": "text/plain",
+    };
+
+    if (mimeTypes[ext]) {
+      contentType = mimeTypes[ext];
+    }
+
+    // 파일 헤더 설정
+    res.setHeader("Content-Type", contentType);
+    res.setHeader("Content-Disposition", `inline; filename="${encodeURIComponent(fileRecord.real_file_name!)}"`);
+    res.setHeader("Cache-Control", "public, max-age=300"); // 5분 캐시
+
+    // 파일 스트림 전송
+    const fileStream = fs.createReadStream(filePath);
+    fileStream.pipe(res);
+  } catch (error) {
+    console.error("❌ 토큰 파일 접근 오류:", error);
+    res.status(500).json({
+      success: false,
+      message: "파일 접근에 실패했습니다.",
+    });
+  }
+};
+
 // Multer 미들웨어 export
 export const uploadMiddleware = upload.array("files", 10); // 최대 10개 파일

backend-node/src/routes/fileRoutes.ts

@@ -3,15 +3,26 @@ import {
   uploadFiles,
   deleteFile,
   getFileList,
+  getComponentFiles,
   downloadFile,
   previewFile,
   getLinkedFiles,
   uploadMiddleware,
+  generateTempToken,
+  getFileByToken,
 } from "../controllers/fileController";
 import { authenticateToken } from "../middleware/authMiddleware";
 
 const router = Router();
 
+// 공개 접근 라우트 (인증 불필요)
+/**
+ * @route GET /api/files/public/:token
+ * @desc 임시 토큰으로 파일 접근 (Google Docs Viewer용)
+ * @access Public
+ */
+router.get("/public/:token", getFileByToken);
+
 // 모든 파일 API는 인증 필요
 router.use(authenticateToken);
 
@@ -30,6 +41,14 @@ router.post("/upload", uploadMiddleware, uploadFiles);
  */
 router.get("/", getFileList);
 
+/**
+ * @route GET /api/files/component-files
+ * @desc 컴포넌트의 템플릿 파일과 데이터 파일 모두 조회
+ * @query screenId, componentId, tableName, recordId, columnName
+ * @access Private
+ */
+router.get("/component-files", getComponentFiles);
+
 /**
  * @route GET /api/files/linked/:tableName/:recordId
  * @desc 테이블 연결된 파일 조회
@@ -58,4 +77,11 @@ router.get("/preview/:objid", previewFile);
  */
 router.get("/download/:objid", downloadFile);
 
+/**
+ * @route POST /api/files/temp-token/:objid
+ * @desc Google Docs Viewer용 임시 공개 토큰 생성
+ * @access Private
+ */
+router.post("/temp-token/:objid", generateTempToken);
+
 export default router;

frontend/app/(main)/admin/page.tsx

@@ -2,6 +2,7 @@ import {
   Users, Shield, Settings, BarChart3, Palette, Layout, Database, Package
 } from "lucide-react";
 import Link from "next/link";
+import { GlobalFileViewer } from "@/components/GlobalFileViewer";
 
 /**
  * 관리자 메인 페이지
@@ -199,6 +200,16 @@ export default function AdminPage() {
           </Link>
         </div>
       </div>
+      
+      {/* 전역 파일 관리 */}
+      <div className="mx-auto max-w-7xl space-y-6">
+        <div className="text-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">전역 파일 관리</h2>
+          <p className="text-gray-600">모든 페이지에서 업로드된 파일들을 관리합니다</p>
+        </div>
+        <GlobalFileViewer />
+      </div>
+      
       </div>
     </div>
   );

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -13,6 +13,7 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { initializeComponents } from "@/lib/registry/components";
 import { EditModal } from "@/components/screen/EditModal";
+import { isFileComponent, getComponentWebType } from "@/lib/utils/componentTypeUtils";
 // import { ResponsiveScreenContainer } from "@/components/screen/ResponsiveScreenContainer"; // 컨테이너 제거
 
 export default function ScreenViewPage() {
@@ -324,7 +325,19 @@ export default function ScreenViewPage() {
                       />
                     ) : (
                       <DynamicWebTypeRenderer
-                        webType={component.webType || "text"}
+                        webType={(() => {
+                          // 유틸리티 함수로 파일 컴포넌트 감지
+                          if (isFileComponent(component)) {
+                            console.log(`🎯 page.tsx - 파일 컴포넌트 감지 → webType: "file"`, {
+                              componentId: component.id,
+                              componentType: component.type,
+                              originalWebType: component.webType
+                            });
+                            return "file";
+                          }
+                          // 다른 컴포넌트는 유틸리티 함수로 webType 결정
+                          return getComponentWebType(component) || "text";
+                        })()}
                         config={component.webTypeConfig}
                         props={{
                           component: component,

frontend/components/GlobalFileViewer.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { GlobalFileManager, GlobalFileInfo } from "@/lib/api/globalFile";
+import { downloadFile } from "@/lib/api/file";
+import { FileViewerModal } from "@/lib/registry/components/file-upload/FileViewerModal";
+import { formatFileSize } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  File,
+  FileText,
+  Image,
+  Video,
+  Music,
+  Archive,
+  Download,
+  Eye,
+  Search,
+  Trash2,
+  Clock,
+  MapPin,
+  Monitor,
+  RefreshCw,
+  Info,
+} from "lucide-react";
+
+interface GlobalFileViewerProps {
+  showControls?: boolean;
+  maxHeight?: string;
+  className?: string;
+}
+
+export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
+  showControls = true,
+  maxHeight = "600px",
+  className = "",
+}) => {
+  const [allFiles, setAllFiles] = useState<GlobalFileInfo[]>([]);
+  const [filteredFiles, setFilteredFiles] = useState<GlobalFileInfo[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTab, setSelectedTab] = useState("all");
+  const [viewerFile, setViewerFile] = useState<GlobalFileInfo | null>(null);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const [registryInfo, setRegistryInfo] = useState({
+    totalFiles: 0,
+    accessibleFiles: 0,
+    pages: [] as string[],
+    screens: [] as number[],
+  });
+
+  // 파일 아이콘 가져오기
+  const getFileIcon = (fileName: string, size: number = 16) => {
+    const extension = fileName.split('.').pop()?.toLowerCase() || '';
+    const iconProps = { size, className: "text-gray-600" };
+
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(extension)) {
+      return <Image {...iconProps} className="text-blue-600" />;
+    }
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(extension)) {
+      return <Video {...iconProps} className="text-purple-600" />;
+    }
+    if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
+      return <Music {...iconProps} className="text-green-600" />;
+    }
+    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
+      return <Archive {...iconProps} className="text-yellow-600" />;
+    }
+    if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
+      return <FileText {...iconProps} className="text-red-600" />;
+    }
+    return <File {...iconProps} />;
+  };
+
+  // 파일 목록 새로고침
+  const refreshFiles = () => {
+    const files = GlobalFileManager.getAllAccessibleFiles();
+    const info = GlobalFileManager.getRegistryInfo();
+    
+    setAllFiles(files);
+    setRegistryInfo(info);
+    
+    // 탭에 따른 필터링
+    filterFilesByTab(files, selectedTab, searchQuery);
+    
+    console.log("🔄 전역 파일 목록 새로고침:", files.length + "개");
+  };
+
+  // 탭별 파일 필터링
+  const filterFilesByTab = (files: GlobalFileInfo[], tab: string, query: string) => {
+    let filtered = files;
+
+    // 탭별 필터링
+    if (tab === "images") {
+      filtered = files.filter(file => {
+        const ext = file.realFileName?.split('.').pop()?.toLowerCase() || '';
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext);
+      });
+    } else if (tab === "documents") {
+      filtered = files.filter(file => {
+        const ext = file.realFileName?.split('.').pop()?.toLowerCase() || '';
+        return ['txt', 'md', 'doc', 'docx', 'pdf', 'rtf', 'hwp', 'hwpx'].includes(ext);
+      });
+    } else if (tab === "recent") {
+      filtered = files
+        .sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime())
+        .slice(0, 20);
+    }
+
+    // 검색 필터링
+    if (query.trim()) {
+      const lowerQuery = query.toLowerCase();
+      filtered = filtered.filter(file =>
+        file.realFileName?.toLowerCase().includes(lowerQuery) ||
+        file.savedFileName?.toLowerCase().includes(lowerQuery) ||
+        file.uploadPage?.toLowerCase().includes(lowerQuery)
+      );
+    }
+
+    setFilteredFiles(filtered);
+  };
+
+  // 파일 다운로드
+  const handleDownload = async (file: GlobalFileInfo) => {
+    try {
+      await downloadFile({
+        fileId: file.objid,
+        originalName: file.realFileName || file.savedFileName || "download",
+      });
+      toast.success(`파일 다운로드 시작: ${file.realFileName}`);
+    } catch (error) {
+      console.error("파일 다운로드 오류:", error);
+      toast.error("파일 다운로드에 실패했습니다.");
+    }
+  };
+
+  // 파일 뷰어 열기
+  const handleView = (file: GlobalFileInfo) => {
+    setViewerFile(file);
+    setIsViewerOpen(true);
+  };
+
+  // 파일 접근 불가능하게 설정 (삭제 대신)
+  const handleRemove = (file: GlobalFileInfo) => {
+    GlobalFileManager.setFileAccessible(file.objid, false);
+    refreshFiles();
+    toast.success(`파일이 목록에서 제거되었습니다: ${file.realFileName}`);
+  };
+
+  // 초기 로드 및 검색/탭 변경 시 필터링
+  useEffect(() => {
+    refreshFiles();
+  }, []);
+
+  useEffect(() => {
+    filterFilesByTab(allFiles, selectedTab, searchQuery);
+  }, [allFiles, selectedTab, searchQuery]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <CardTitle className="flex items-center gap-2">
+              <File className="w-5 h-5" />
+              전역 파일 저장소
+            </CardTitle>
+            {showControls && (
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" className="flex items-center gap-1">
+                  <Info className="w-3 h-3" />
+                  {registryInfo.accessibleFiles}개 파일
+                </Badge>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={refreshFiles}
+                  className="flex items-center gap-1"
+                >
+                  <RefreshCw className="w-3 h-3" />
+                  새로고침
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {showControls && (
+            <div className="flex items-center gap-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Input
+                  placeholder="파일명으로 검색..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-8"
+                />
+              </div>
+            </div>
+          )}
+        </CardHeader>
+
+        <CardContent>
+          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+            <TabsList className="grid w-full grid-cols-4">
+              <TabsTrigger value="all">전체</TabsTrigger>
+              <TabsTrigger value="recent">최근</TabsTrigger>
+              <TabsTrigger value="images">이미지</TabsTrigger>
+              <TabsTrigger value="documents">문서</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value={selectedTab} className="mt-4">
+              <div 
+                className="space-y-2 overflow-y-auto"
+                style={{ maxHeight }}
+              >
+                {filteredFiles.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    {searchQuery ? "검색 결과가 없습니다." : "저장된 파일이 없습니다."}
+                  </div>
+                ) : (
+                  filteredFiles.map((file) => (
+                    <Card key={file.objid} className="p-3">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          {getFileIcon(file.realFileName || file.savedFileName || "", 20)}
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium truncate">
+                              {file.realFileName || file.savedFileName}
+                            </div>
+                            <div className="text-sm text-gray-500 flex items-center gap-2">
+                              <span>{formatFileSize(file.fileSize)}</span>
+                              <div className="flex items-center gap-1">
+                                <Clock className="w-3 h-3" />
+                                {new Date(file.uploadTime).toLocaleDateString()}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <MapPin className="w-3 h-3" />
+                                {file.uploadPage.split('/').pop() || 'Unknown'}
+                              </div>
+                              {file.screenId && (
+                                <div className="flex items-center gap-1">
+                                  <Monitor className="w-3 h-3" />
+                                  Screen {file.screenId}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleView(file)}
+                            className="flex items-center gap-1"
+                          >
+                            <Eye className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleDownload(file)}
+                            className="flex items-center gap-1"
+                          >
+                            <Download className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemove(file)}
+                            className="flex items-center gap-1 text-red-600 hover:text-red-700"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    </Card>
+                  ))
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* 파일 뷰어 모달 */}
+      {viewerFile && (
+        <FileViewerModal
+          file={viewerFile}
+          isOpen={isViewerOpen}
+          onClose={() => {
+            setIsViewerOpen(false);
+            setViewerFile(null);
+          }}
+        />
+      )}
+    </div>
+  );
+};

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -42,6 +42,7 @@ import { enhancedFormService } from "@/lib/services/enhancedFormService";
 import { FormValidationIndicator } from "@/components/common/FormValidationIndicator";
 import { useFormValidation } from "@/hooks/useFormValidation";
 import { UnifiedColumnInfo as ColumnInfo } from "@/types";
+import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;
@@ -771,11 +772,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         
         const currentValue = getCurrentValue();
 
+        // 화면 ID 추출 (URL에서)
+        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+          ? parseInt(window.location.pathname.split('/screens/')[1]) 
+          : null;
+
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
           componentId: widget.id,
           widgetType: widget.widgetType,
           config,
           currentValue,
+          screenId,
           appliedSettings: {
             accept: config?.accept,
             multiple: config?.multiple,
@@ -1572,7 +1579,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   };
 
   // 파일 첨부 컴포넌트 처리
-  if (component.type === "file") {
+  if (isFileComponent(component)) {
     const fileComponent = component as FileComponent;
     
     console.log("🎯 File 컴포넌트 렌더링:", {

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -13,6 +13,7 @@ import { InteractiveDataTable } from "./InteractiveDataTable";
 import { DynamicWebTypeRenderer } from "@/lib/registry";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { isFileComponent, isDataTableComponent, isButtonComponent } from "@/lib/utils/componentTypeUtils";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
@@ -143,7 +144,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   // 동적 대화형 위젯 렌더링
   const renderInteractiveWidget = (comp: ComponentData) => {
     // 데이터 테이블 컴포넌트 처리
-    if (comp.type === "datatable") {
+    if (isDataTableComponent(comp)) {
       return (
         <InteractiveDataTable
           component={comp as DataTableComponent}
@@ -157,12 +158,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     }
 
     // 버튼 컴포넌트 처리
-    if (comp.type === "button") {
+    if (isButtonComponent(comp)) {
       return renderButton(comp);
     }
 
     // 파일 컴포넌트 처리
-    if (comp.type === "file") {
+    if (isFileComponent(comp)) {
       return renderFileComponent(comp as FileComponent);
     }
 
@@ -413,6 +414,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const { label, readonly } = comp;
     const fieldName = comp.columnName || comp.id;
 
+    // 화면 ID 추출 (URL에서)
+    const screenId = screenInfo?.screenId || 
+      (typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+        ? parseInt(window.location.pathname.split('/screens/')[1]) 
+        : null);
+
     return (
       <div className="h-full w-full">
         {/* 실제 FileUploadComponent 사용 */}
@@ -433,6 +440,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isInteractive={true}
           isDesignMode={false}
           formData={{
+            screenId, // 화면 ID 전달
             tableName: screenInfo?.tableName,
             id: formData.id,
             ...formData
@@ -447,7 +455,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           }}
           onUpdate={(updates) => {
             console.log("🔄 파일 컴포넌트 업데이트:", updates);
-            // 파일 업로드 완료 시 formData 업데이트
+            // 파일 업로드 완료 시 formData 업데이터
             if (updates.uploadedFiles && onFormDataChange) {
               onFormDataChange(fieldName, updates.uploadedFiles);
             }

frontend/components/screen/RealtimePreview.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { ComponentData, WebType, isWidgetComponent, isContainerComponent } from "@/types";
+import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -126,6 +127,33 @@ const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) =
     className: `w-full h-full ${borderClass}`,
   };
 
+  // 파일 컴포넌트 강제 체크
+  if (isFileComponent(widget)) {
+    console.log("🎯 RealtimePreview - 파일 컴포넌트 강제 감지:", {
+      componentId: widget.id,
+      widgetType: widgetType,
+      isFileComponent: true
+    });
+    
+    try {
+      return (
+        <DynamicWebTypeRenderer
+          webType="file"
+          props={{
+            ...commonProps,
+            component: widget,
+            value: undefined, // 미리보기이므로 값은 없음
+            readonly: readonly,
+          }}
+          config={widget.webTypeConfig}
+        />
+      );
+    } catch (error) {
+      console.error(`파일 웹타입 렌더링 실패:`, error);
+      return <div className="text-xs text-gray-500 p-2">파일 컴포넌트 (렌더링 오류)</div>;
+    }
+  }
+
   // 동적 웹타입 렌더링 사용
   if (widgetType) {
     try {
@@ -209,6 +237,29 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 }) => {
   const { user } = useAuth();
   const { type, id, position, size, style = {} } = component;
+  const [fileUpdateTrigger, setFileUpdateTrigger] = useState(0);
+
+  // 전역 파일 상태 변경 감지 (해당 컴포넌트만)
+  useEffect(() => {
+    const handleGlobalFileStateChange = (event: CustomEvent) => {
+      if (event.detail.componentId === component.id) {
+        console.log("🔄 RealtimePreview 파일 상태 변경 감지:", {
+          componentId: component.id,
+          filesCount: event.detail.files?.length || 0,
+          action: event.detail.action
+        });
+        setFileUpdateTrigger(prev => prev + 1);
+      }
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+      
+      return () => {
+        window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+      };
+    }
+  }, [component.id]);
 
   // 컴포넌트 스타일 계산
   const componentStyle = {
@@ -308,8 +359,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           </div>
         )}
 
-        {/* 파일 타입 */}
+        {/* 파일 타입 - 레거시 및 신규 타입 지원 */}
-        {type === "file" && (() => {
+        {isFileComponent(component) && (() => {
           const fileComponent = component as any;
           const uploadedFiles = fileComponent.uploadedFiles || [];
           
@@ -327,6 +378,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
             currentFilesCount: currentFiles.length,
             currentFiles: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName || f.name })),
             componentType: component.type,
+            fileUpdateTrigger: fileUpdateTrigger,
             timestamp: new Date().toISOString()
           });
           

frontend/components/screen/ScreenDesigner.tsx

@@ -734,6 +734,72 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     initComponents();
   }, []);
 
+  // 화면 선택 시 파일 복원
+  useEffect(() => {
+    if (selectedScreen?.screenId) {
+      restoreScreenFiles();
+    }
+  }, [selectedScreen?.screenId]);
+
+  // 화면의 모든 파일 컴포넌트 파일 복원
+  const restoreScreenFiles = useCallback(async () => {
+    if (!selectedScreen?.screenId) return;
+
+    try {
+      console.log("🔄 화면 파일 복원 시작:", selectedScreen.screenId);
+      
+      // 해당 화면의 모든 파일 조회
+      const response = await ScreenFileAPI.getScreenComponentFiles(selectedScreen.screenId);
+      
+      if (response.success && response.componentFiles) {
+        console.log("📁 복원할 파일 데이터:", response.componentFiles);
+        
+        // 각 컴포넌트별로 파일 복원
+        Object.entries(response.componentFiles).forEach(([componentId, files]) => {
+          if (Array.isArray(files) && files.length > 0) {
+            // 전역 상태에 파일 저장
+            const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
+            globalFileState[componentId] = files;
+            if (typeof window !== 'undefined') {
+              (window as any).globalFileState = globalFileState;
+            }
+            
+            // localStorage에도 백업
+            if (typeof window !== 'undefined') {
+              localStorage.setItem(`fileComponent_${componentId}_files`, JSON.stringify(files));
+            }
+            
+            console.log(`📂 컴포넌트 ${componentId} 파일 복원:`, files.length, "개");
+          }
+        });
+        
+        // 레이아웃의 컴포넌트들에 파일 정보 적용
+        setLayout(prevLayout => {
+          const updatedComponents = prevLayout.components.map(comp => {
+            const componentFiles = response.componentFiles[comp.id];
+            if (componentFiles && componentFiles.length > 0) {
+              return {
+                ...comp,
+                uploadedFiles: componentFiles,
+                lastFileUpdate: Date.now()
+              };
+            }
+            return comp;
+          });
+          
+          return {
+            ...prevLayout,
+            components: updatedComponents
+          };
+        });
+        
+        console.log("✅ 화면 파일 복원 완료");
+      }
+    } catch (error) {
+      console.error("❌ 화면 파일 복원 오류:", error);
+    }
+  }, [selectedScreen?.screenId]);
+
   // 전역 파일 상태 변경 이벤트 리스너
   useEffect(() => {
     const handleGlobalFileStateChange = (event: CustomEvent) => {

frontend/components/screen/layout/ColumnComponent.tsx

@@ -64,7 +64,7 @@ export default function ColumnComponent({
       className={cn(
         "flex-1 rounded border border-gray-200 p-2",
         isSelected && "border-blue-500 bg-blue-50",
-        isMoving && "cursor-move shadow-lg",
+        isMoving && "cursor-move",
         className,
       )}
       style={style}

frontend/components/screen/layout/ContainerComponent.tsx

@@ -64,7 +64,7 @@ export default function ContainerComponent({
       className={cn(
         "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
         isSelected && "border-blue-500 bg-blue-50",
-        isMoving && "cursor-move shadow-lg",
+        isMoving && "cursor-move",
         className,
       )}
       style={style}

frontend/components/screen/layout/RowComponent.tsx

@@ -64,7 +64,7 @@ export default function RowComponent({
       className={cn(
         "flex gap-4 rounded border border-gray-200 p-2",
         isSelected && "border-blue-500 bg-blue-50",
-        isMoving && "cursor-move shadow-lg",
+        isMoving && "cursor-move",
         className,
       )}
       style={style}

frontend/components/screen/panels/DetailSettingsPanel.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/types/screen";
 // 레거시 ButtonConfigPanel 제거됨
 import { FileComponentConfigPanel } from "./FileComponentConfigPanel";
+import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 
 // 새로운 컴포넌트 설정 패널들 import
 import { ButtonConfigPanel as NewButtonConfigPanel } from "../config-panels/ButtonConfigPanel";
@@ -908,7 +909,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
   }
 
   // 파일 컴포넌트인 경우 FileComponentConfigPanel 렌더링
-  if (selectedComponent.type === "file" || (selectedComponent.type === "widget" && selectedComponent.widgetType === "file")) {
+  if (isFileComponent(selectedComponent)) {
     const fileComponent = selectedComponent as FileComponent;
 
     return (

frontend/components/screen/panels/FileComponentConfigPanel.tsx

@@ -10,7 +10,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { FileComponent, TableInfo } from "@/types/screen";
 import { Plus, X, Upload, File, Image, FileText, Download, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { FileInfo } from "@/lib/registry/components/file-upload/types";
+import { FileInfo, FileUploadResponse } from "@/lib/registry/components/file-upload/types";
 import { uploadFiles, downloadFile, deleteFile } from "@/lib/api/file";
 import { formatFileSize } from "@/lib/utils";
 import { toast } from "sonner";
@@ -302,7 +302,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
         files: filesToUpload,
         tableName: tableName,
         fieldName: fieldName,
-        recordId: `${screenId}:${componentId}`, // 화면ID:컴포넌트ID 형태
+        recordId: `screen_${screenId}:${componentId}`, // 템플릿 파일 형태
         docType: localInputs.docType,
         docTypeName: localInputs.docTypeName,
         targetObjid: targetObjid, // 그리드 연동을 위한 targetObjid
@@ -358,6 +358,19 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
         const backupKey = `fileComponent_${component.id}_files`;
         localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
         
+        // 전역 파일 상태 변경 이벤트 발생 (RealtimePreview 업데이트용)
+        if (typeof window !== 'undefined') {
+          const event = new CustomEvent('globalFileStateChanged', {
+            detail: {
+              componentId: component.id,
+              files: updatedFiles,
+              action: 'upload',
+              timestamp: Date.now()
+            }
+          });
+          window.dispatchEvent(event);
+        }
+
         console.log("🔄 FileComponentConfigPanel 자동 저장:", {
           componentId: component.id,
           uploadedFiles: updatedFiles.length,
@@ -369,6 +382,11 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
 
         // 그리드 파일 상태 새로고침 이벤트 발생
         if (typeof window !== 'undefined') {
+          const tableName = component.tableName || currentTableName || 'unknown';
+          const columnName = component.columnName || component.id;
+          const recordId = component.id; // 임시로 컴포넌트 ID 사용
+          const targetObjid = component.id;
+          
           const refreshEvent = new CustomEvent('refreshFileStatus', {
             detail: {
               tableName: tableName,
@@ -413,7 +431,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
   const handleFileDownload = useCallback(async (file: FileInfo) => {
     try {
       await downloadFile({
-        fileId: file.objid || file.id,
+        fileId: file.objid || file.id || '',
         serverFilename: file.savedFileName,
         originalName: file.realFileName || file.name || 'download',
       });
@@ -427,7 +445,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
   // 파일 삭제 처리
   const handleFileDelete = useCallback(async (fileId: string) => {
     try {
-      await deleteFile(fileId);
+      await deleteFile(fileId, 'temp_record');
       const updatedFiles = uploadedFiles.filter(file => file.objid !== fileId && file.id !== fileId);
       setUploadedFiles(updatedFiles);
       
@@ -959,7 +977,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
                         <Button
                           variant="ghost"
                           size="sm"
-                          onClick={() => handleFileDelete(file.objid || file.id)}
+                          onClick={() => handleFileDelete(file.objid || file.id || '')}
                           className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
                           title="삭제"
                         >

frontend/lib/api/file.ts

@@ -16,6 +16,7 @@ export interface FileUploadResponse {
   success: boolean;
   message: string;
   files: FileInfo[];
+  data?: FileInfo[];
 }
 
 export interface FileDownloadParams {
@@ -134,6 +135,28 @@ export const getFileInfo = async (fileId: string, serverFilename: string) => {
   return response.data;
 };
 
+/**
+ * 컴포넌트의 템플릿 파일과 데이터 파일을 모두 조회
+ */
+export const getComponentFiles = async (params: {
+  screenId: number;
+  componentId: string;
+  tableName?: string;
+  recordId?: string;
+  columnName?: string;
+}): Promise<{
+  success: boolean;
+  templateFiles: FileInfo[];
+  dataFiles: FileInfo[];
+  totalFiles: FileInfo[];
+}> => {
+  const response = await apiClient.get('/files/component-files', {
+    params,
+  });
+
+  return response.data;
+};
+
 /**
  * 파일 업로드 및 JSON 데이터 생성
  * InteractiveScreenViewer에서 사용할 통합 함수

frontend/lib/api/globalFile.ts

@@ -0,0 +1,183 @@
+import { FileInfo } from "./file";
+
+export interface GlobalFileInfo extends FileInfo {
+  uploadPage: string;
+  uploadTime: string;
+  componentId: string;
+  screenId?: number;
+  accessible: boolean;
+}
+
+/**
+ * 전역 파일 저장소 관리 클래스
+ * 페이지 간 파일 공유를 위한 클라이언트 사이드 파일 레지스트리
+ */
+export class GlobalFileManager {
+  private static readonly STORAGE_KEY = 'globalFileRegistry';
+  private static readonly SESSION_STORAGE_KEY = 'globalFileRegistrySession';
+
+  /**
+   * 전역 파일 저장소 가져오기
+   */
+  static getRegistry(): Record<string, GlobalFileInfo> {
+    if (typeof window === 'undefined') return {};
+
+    // 1. 메모리에서 먼저 확인
+    if ((window as any).globalFileRegistry) {
+      return (window as any).globalFileRegistry;
+    }
+
+    // 2. sessionStorage에서 확인 (세션 동안 유지)
+    const sessionData = sessionStorage.getItem(this.SESSION_STORAGE_KEY);
+    if (sessionData) {
+      try {
+        const parsedData = JSON.parse(sessionData);
+        (window as any).globalFileRegistry = parsedData;
+        return parsedData;
+      } catch (error) {
+        console.warn('세션 파일 데이터 파싱 실패:', error);
+      }
+    }
+
+    // 3. localStorage에서 확인 (영구 저장)
+    const localData = localStorage.getItem(this.STORAGE_KEY);
+    if (localData) {
+      try {
+        const parsedData = JSON.parse(localData);
+        (window as any).globalFileRegistry = parsedData;
+        return parsedData;
+      } catch (error) {
+        console.warn('로컬 파일 데이터 파싱 실패:', error);
+      }
+    }
+
+    return {};
+  }
+
+  /**
+   * 파일을 전역 저장소에 등록
+   */
+  static registerFile(fileInfo: GlobalFileInfo): void {
+    if (typeof window === 'undefined') return;
+
+    const registry = this.getRegistry();
+    registry[fileInfo.objid] = fileInfo;
+
+    // 메모리, 세션, 로컬스토리지에 모두 저장
+    (window as any).globalFileRegistry = registry;
+    sessionStorage.setItem(this.SESSION_STORAGE_KEY, JSON.stringify(registry));
+    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(registry));
+
+    console.log(`🌐 파일 등록됨: ${fileInfo.savedFileName} (총 ${Object.keys(registry).length}개)`);
+  }
+
+  /**
+   * 여러 파일을 한번에 등록
+   */
+  static registerFiles(files: FileInfo[], context: {
+    uploadPage: string;
+    componentId: string;
+    screenId?: number;
+  }): void {
+    files.forEach(file => {
+      const globalFileInfo: GlobalFileInfo = {
+        ...file,
+        uploadPage: context.uploadPage,
+        uploadTime: new Date().toISOString(),
+        componentId: context.componentId,
+        screenId: context.screenId,
+        accessible: true,
+      };
+      this.registerFile(globalFileInfo);
+    });
+  }
+
+  /**
+   * 모든 접근 가능한 파일 목록 가져오기
+   */
+  static getAllAccessibleFiles(): GlobalFileInfo[] {
+    const registry = this.getRegistry();
+    return Object.values(registry).filter(file => file.accessible);
+  }
+
+  /**
+   * 특정 페이지에서 업로드된 파일들 가져오기
+   */
+  static getFilesByPage(pagePath: string): GlobalFileInfo[] {
+    const registry = this.getRegistry();
+    return Object.values(registry).filter(file => 
+      file.uploadPage === pagePath && file.accessible
+    );
+  }
+
+  /**
+   * 특정 화면에서 업로드된 파일들 가져오기
+   */
+  static getFilesByScreen(screenId: number): GlobalFileInfo[] {
+    const registry = this.getRegistry();
+    return Object.values(registry).filter(file => 
+      file.screenId === screenId && file.accessible
+    );
+  }
+
+  /**
+   * 파일 검색 (이름으로)
+   */
+  static searchFiles(query: string): GlobalFileInfo[] {
+    const registry = this.getRegistry();
+    const lowerQuery = query.toLowerCase();
+    return Object.values(registry).filter(file => 
+      file.accessible && 
+      (file.realFileName?.toLowerCase().includes(lowerQuery) || 
+       file.savedFileName?.toLowerCase().includes(lowerQuery))
+    );
+  }
+
+  /**
+   * 파일을 접근 불가능하게 설정 (삭제 대신)
+   */
+  static setFileAccessible(fileId: string, accessible: boolean): void {
+    const registry = this.getRegistry();
+    if (registry[fileId]) {
+      registry[fileId].accessible = accessible;
+      
+      // 저장소 업데이트
+      (window as any).globalFileRegistry = registry;
+      sessionStorage.setItem(this.SESSION_STORAGE_KEY, JSON.stringify(registry));
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(registry));
+    }
+  }
+
+  /**
+   * 전역 저장소 초기화
+   */
+  static clearRegistry(): void {
+    if (typeof window === 'undefined') return;
+
+    (window as any).globalFileRegistry = {};
+    sessionStorage.removeItem(this.SESSION_STORAGE_KEY);
+    localStorage.removeItem(this.STORAGE_KEY);
+    
+    console.log('🧹 전역 파일 저장소 초기화됨');
+  }
+
+  /**
+   * 저장소 상태 정보
+   */
+  static getRegistryInfo(): {
+    totalFiles: number;
+    accessibleFiles: number;
+    pages: string[];
+    screens: number[];
+  } {
+    const registry = this.getRegistry();
+    const files = Object.values(registry);
+    
+    return {
+      totalFiles: files.length,
+      accessibleFiles: files.filter(f => f.accessible).length,
+      pages: [...new Set(files.map(f => f.uploadPage))],
+      screens: [...new Set(files.map(f => f.screenId).filter(Boolean) as number[])],
+    };
+  }
+}

frontend/lib/registry/DynamicWebTypeRenderer.tsx

@@ -18,6 +18,14 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
 }) => {
   // 모든 hooks를 먼저 호출 (조건부 return 이전에)
   const { webTypes } = useWebTypes({ active: "Y" });
+  
+  // 디버깅: 전달받은 웹타입과 props 정보 로깅
+  console.log("🔍 DynamicWebTypeRenderer 호출:", {
+    webType,
+    propsKeys: Object.keys(props),
+    component: props.component,
+    isFileComponent: props.component?.type === 'file' || webType === 'file'
+  });
 
   const webTypeDefinition = useMemo(() => {
     return WebTypeRegistry.getWebType(webType);
@@ -47,6 +55,17 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
     };
   }, [props, mergedConfig, webType, onEvent]);
 
+  // 0순위: 파일 컴포넌트 강제 처리 (최우선)
+  if (webType === "file" || props.component?.type === "file") {
+    try {
+      const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
+      console.log(`🎯 최우선: 파일 컴포넌트 → FileUploadComponent 사용`);
+      return <FileUploadComponent {...props} {...finalProps} />;
+    } catch (error) {
+      console.error("FileUploadComponent 로드 실패:", error);
+    }
+  }
+
   // 1순위: DB에서 지정된 컴포넌트 사용 (항상 우선)
   if (dbWebType?.component_name) {
     try {
@@ -65,7 +84,9 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
       // console.log(`컴포넌트 "${dbWebType.component_name}" 성공적으로 로드됨:`, ComponentByName);
       // return <ComponentByName {...props} {...finalProps} />;
       console.warn(`DB 지정 컴포넌트 "${dbWebType.component_name}" 기능 임시 비활성화 (FileWidget 제외)`);
-      return <div>컴포넌트 로딩 중...</div>;
+      
+      // 로딩 중 메시지 대신 레지스트리로 폴백
+      // return <div>컴포넌트 로딩 중...</div>;
     } catch (error) {
       console.error(`DB 지정 컴포넌트 "${dbWebType.component_name}" 렌더링 실패:`, error);
     }
@@ -114,10 +135,36 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
       return <FileUploadComponent {...props} {...finalProps} />;
     }
     
-    // const FallbackComponent = getWidgetComponentByWebType(webType);
+    // 텍스트 입력 웹타입들
-    // return <FallbackComponent {...props} />;
+    if (["text", "email", "password", "tel"].includes(webType)) {
-    console.warn(`웹타입 "${webType}" 폴백 기능 임시 비활성화`);
+      const { TextInputComponent } = require("@/lib/registry/components/text-input/TextInputComponent");
-    return <div>웹타입 로딩 중...</div>;
+      console.log(`✅ 폴백: ${webType} 웹타입 → TextInputComponent 사용`);
+      return <TextInputComponent {...props} {...finalProps} />;
+    }
+    
+    // 숫자 입력 웹타입들
+    if (["number", "decimal"].includes(webType)) {
+      const { NumberInputComponent } = require("@/lib/registry/components/number-input/NumberInputComponent");
+      console.log(`✅ 폴백: ${webType} 웹타입 → NumberInputComponent 사용`);
+      return <NumberInputComponent {...props} {...finalProps} />;
+    }
+    
+    // 날짜 입력 웹타입들
+    if (["date", "datetime", "time"].includes(webType)) {
+      const { DateInputComponent } = require("@/lib/registry/components/date-input/DateInputComponent");
+      console.log(`✅ 폴백: ${webType} 웹타입 → DateInputComponent 사용`);
+      return <DateInputComponent {...props} {...finalProps} />;
+    }
+    
+    // 기본 폴백: Input 컴포넌트 사용
+    const { Input } = require("@/components/ui/input");
+    console.log(`✅ 폴백: ${webType} 웹타입 → 기본 Input 사용`);
+    return <Input 
+      placeholder={`${webType}`}
+      disabled={props.readonly}
+      className="w-full"
+      {...props}
+    />;
   } catch (error) {
     console.error(`웹타입 "${webType}" 폴백 컴포넌트 렌더링 실패:`, error);
     return (

frontend/lib/registry/components/file-upload/FileManagerModal.tsx

@@ -0,0 +1,297 @@
+"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
+} 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;
+  config: FileUploadConfig;
+  isDesignMode?: boolean;
+}
+
+export const FileManagerModal: React.FC<FileManagerModalProps> = ({
+  isOpen,
+  onClose,
+  uploadedFiles,
+  onFileUpload,
+  onFileDownload,
+  onFileDelete,
+  onFileView,
+  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 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);
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={() => {}}>
+        <DialogContent className="max-w-4xl 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-4 h-[70vh]">
+            {/* 파일 업로드 영역 */}
+            {!isDesignMode && (
+              <div
+                className={`
+                  border-2 border-dashed rounded-lg p-6 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={handleFileSelect}
+                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 flex-col items-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3"></div>
+                    <span className="text-blue-600 font-medium">업로드 중...</span>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center">
+                    <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
+                    <p className="text-lg font-medium text-gray-900 mb-2">
+                      파일을 드래그하거나 클릭하여 업로드하세요
+                    </p>
+                    <p className="text-sm text-gray-500">
+                      {config.accept && `지원 형식: ${config.accept}`}
+                      {config.maxSize && ` • 최대 ${formatFileSize(config.maxSize)}`}
+                      {config.multiple && ' • 여러 파일 선택 가능'}
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 파일 목록 */}
+            <div className="flex-1 overflow-y-auto border border-gray-200 rounded-lg">
+              <div className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <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>
+
+                {uploadedFiles.length > 0 ? (
+                  <div className="space-y-2">
+                    {uploadedFiles.map((file) => (
+                      <div
+                        key={file.objid}
+                        className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                      >
+                        <div className="flex-shrink-0">
+                          {getFileIcon(file.fileExt)}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-gray-900 truncate">
+                            {file.realFileName}
+                          </p>
+                          <p className="text-xs text-gray-500">
+                            {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
+                          </p>
+                        </div>
+                        <div className="flex items-center space-x-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => handleFileViewInternal(file)}
+                            title="미리보기"
+                          >
+                            <Eye className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => onFileDownload(file)}
+                            title="다운로드"
+                          >
+                            <Download className="w-4 h-4" />
+                          </Button>
+                          {!isDesignMode && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
+                              onClick={() => onFileDelete(file)}
+                              title="삭제"
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+                    <File className="w-16 h-16 mb-4 text-gray-300" />
+                    <p className="text-lg font-medium text-gray-600">업로드된 파일이 없습니다</p>
+                    <p className="text-sm text-gray-500 mt-2">
+                      {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 드래그하거나 클릭하여 업로드하세요'}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 파일 뷰어 모달 */}
+      <FileViewerModal
+        file={viewerFile}
+        isOpen={isViewerOpen}
+        onClose={handleViewerClose}
+        onDownload={onFileDownload}
+        onDelete={!isDesignMode ? onFileDelete : undefined}
+      />
+    </>
+  );
+};

frontend/lib/registry/components/file-upload/FileUploadComponent.tsx

@@ -3,9 +3,11 @@ 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 } from "@/lib/api/file";
+import { uploadFiles, downloadFile, deleteFile, getComponentFiles } from "@/lib/api/file";
+import { GlobalFileManager } from "@/lib/api/globalFile";
 import { formatFileSize } from "@/lib/utils";
 import { FileViewerModal } from "./FileViewerModal";
+import { FileManagerModal } from "./FileManagerModal";
 import { FileUploadConfig, FileInfo, FileUploadStatus, FileUploadResponse } from "./types";
 import {
   Upload,
@@ -75,13 +77,13 @@ export interface FileUploadComponentProps {
   onConfigChange?: (config: any) => void;
 }
 
-export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
+const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   component,
   componentConfig,
   componentStyle,
   className,
   isInteractive,
-  isDesignMode,
+  isDesignMode = false, // 기본값 설정
   formData,
   onFormDataChange,
   onClick,
@@ -94,55 +96,230 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   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 fileInputRef = useRef<HTMLInputElement>(null);
 
+  // 컴포넌트 마운트 시 즉시 localStorage에서 파일 복원
+  useEffect(() => {
+    if (!component?.id) return;
+    
+    try {
+      const backupKey = `fileUpload_${component.id}`;
+      const backupFiles = localStorage.getItem(backupKey);
+      if (backupFiles) {
+        const parsedFiles = JSON.parse(backupFiles);
+        if (parsedFiles.length > 0) {
+          console.log("🚀 컴포넌트 마운트 시 파일 즉시 복원:", {
+            componentId: component.id,
+            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,
+              [component.id]: parsedFiles
+            };
+          }
+        }
+      }
+    } catch (e) {
+      console.warn("컴포넌트 마운트 시 파일 복원 실패:", e);
+    }
+  }, [component.id]); // component.id가 변경될 때만 실행
+
+  // 템플릿 파일과 데이터 파일을 조회하는 함수
+  const loadComponentFiles = useCallback(async () => {
+    if (!component?.id) return;
+    
+    try {
+      const screenId = formData?.screenId || (typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+        ? parseInt(window.location.pathname.split('/screens/')[1]) 
+        : null);
+      
+      if (!screenId) {
+        console.log("📂 화면 ID 없음, 기존 파일 로직 사용");
+        return false; // 기존 로직 사용
+      }
+      
+      const params = {
+        screenId,
+        componentId: component.id,
+        tableName: formData?.tableName || component.tableName,
+        recordId: formData?.id,
+        columnName: component.columnName,
+      };
+      
+      console.log("📂 컴포넌트 파일 조회:", params);
+      
+      const response = await getComponentFiles(params);
+      
+      if (response.success) {
+        console.log("📁 파일 조회 결과:", {
+          templateFiles: response.templateFiles.length,
+          dataFiles: response.dataFiles.length,
+          totalFiles: response.totalFiles.length,
+          summary: response.summary,
+          actualFiles: response.totalFiles
+        });
+        
+        // 파일 데이터 형식 통일
+        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
+        }));
+        
+        console.log("📁 형식 변환된 파일 데이터:", formattedFiles);
+        
+        // 🔄 localStorage의 기존 파일과 서버 파일 병합
+        let finalFiles = formattedFiles;
+        try {
+          const backupKey = `fileUpload_${component.id}`;
+          const backupFiles = localStorage.getItem(backupKey);
+          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("🔄 파일 병합 완료:", {
+              서버파일: formattedFiles.length,
+              로컬파일: parsedBackupFiles.length,
+              추가파일: additionalFiles.length,
+              최종파일: finalFiles.length,
+              최종파일목록: finalFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
+            });
+          }
+        } catch (e) {
+          console.warn("파일 병합 중 오류:", e);
+        }
+        
+        setUploadedFiles(finalFiles);
+        
+        // 전역 상태에도 저장
+        if (typeof window !== 'undefined') {
+          (window as any).globalFileState = {
+            ...(window as any).globalFileState,
+            [component.id]: finalFiles
+          };
+          
+          // 🌐 전역 파일 저장소에 등록 (페이지 간 공유용)
+          GlobalFileManager.registerFiles(finalFiles, {
+            uploadPage: window.location.pathname,
+            componentId: component.id,
+            screenId: formData?.screenId,
+          });
+          
+          // localStorage 백업도 병합된 파일로 업데이트
+          try {
+            const backupKey = `fileUpload_${component.id}`;
+            localStorage.setItem(backupKey, JSON.stringify(finalFiles));
+            console.log("💾 localStorage 백업 업데이트 완료:", finalFiles.length);
+          } 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]);
+
   // 컴포넌트 파일 동기화
   useEffect(() => {
     const componentFiles = (component as any)?.uploadedFiles || [];
     const lastUpdate = (component as any)?.lastFileUpdate;
     
-    // 전역 상태에서 최신 파일 정보 가져오기
+    console.log("🔄 FileUploadComponent 파일 동기화 시작:", {
-    const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
-    const globalFiles = globalFileState[component.id] || [];
-    
-    // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
-    const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
-    
-    console.log("🔄 FileUploadComponent 파일 동기화:", {
       componentId: component.id,
       componentFiles: componentFiles.length,
-      globalFiles: globalFiles.length,
+      formData: formData,
-      currentFiles: currentFiles.length,
+      screenId: formData?.screenId,
-      uploadedFiles: uploadedFiles.length,
+      currentUploadedFiles: uploadedFiles.length
-      lastUpdate: lastUpdate
     });
-
+    
-    // localStorage에서 백업 파일 복원
+    // 먼저 새로운 템플릿 파일 조회 시도
-    try {
+    loadComponentFiles().then(useNewLogic => {
-      const backupKey = `fileUpload_${component.id}`;
+      if (useNewLogic) {
-      const backupFiles = localStorage.getItem(backupKey);
+        console.log("✅ 새로운 템플릿 파일 로직 사용");
-      if (backupFiles && currentFiles.length === 0) {
+        return; // 새로운 로직이 성공했으면 기존 로직 스킵
-        const parsedFiles = JSON.parse(backupFiles);
-        setUploadedFiles(parsedFiles);
-        return;
       }
-    } catch (e) {
+      
-      console.warn("localStorage 백업 복원 실패:", e);
+      // 기존 로직 사용
-    }
+      console.log("📂 기존 파일 로직 사용");
-
+      
-    // 최신 파일과 현재 파일 비교
+      // 전역 상태에서 최신 파일 정보 가져오기
-    if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
+      const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
-      console.log("🔄 useEffect에서 파일 목록 변경 감지:", {
+      const globalFiles = globalFileState[component.id] || [];
+      
+      // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
+      const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
+    
+      console.log("🔄 FileUploadComponent 파일 동기화:", {
+        componentId: component.id,
+        componentFiles: componentFiles.length,
+        globalFiles: globalFiles.length,
         currentFiles: currentFiles.length,
         uploadedFiles: uploadedFiles.length,
-        currentFilesData: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
+        lastUpdate: lastUpdate
-        uploadedFilesData: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName }))
       });
-      setUploadedFiles(currentFiles);
+
-      setForceUpdate(prev => prev + 1);
+      // localStorage에서 백업 파일 복원 (새로고침 시 중요!)
-    }
+      try {
-  }, [component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
+        const backupKey = `fileUpload_${component.id}`;
+        const backupFiles = localStorage.getItem(backupKey);
+        if (backupFiles) {
+          const parsedFiles = JSON.parse(backupFiles);
+          if (parsedFiles.length > 0 && currentFiles.length === 0) {
+            console.log("🔄 localStorage에서 파일 복원:", {
+              componentId: component.id,
+              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,
+                [component.id]: parsedFiles
+              };
+            }
+            return;
+          }
+        }
+      } catch (e) {
+        console.warn("localStorage 백업 복원 실패:", e);
+      }
+
+      // 최신 파일과 현재 파일 비교
+      if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
+        console.log("🔄 useEffect에서 파일 목록 변경 감지:", {
+          currentFiles: currentFiles.length,
+          uploadedFiles: uploadedFiles.length,
+          currentFilesData: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
+          uploadedFilesData: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName }))
+        });
+        setUploadedFiles(currentFiles);
+        setForceUpdate(prev => prev + 1);
+      }
+    });
+  }, [loadComponentFiles, component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
 
   // 전역 상태 변경 감지 (모든 파일 컴포넌트 동기화 + 화면 복원)
   useEffect(() => {
@@ -164,9 +341,9 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         const logMessage = isRestore ? "🔄 화면 복원으로 파일 상태 동기화" : "✅ 파일 상태 동기화 적용";
         console.log(logMessage, {
           componentId: component.id,
-          이전파일수: uploadedFiles.length,
+          이전파일수: uploadedFiles?.length || 0,
-          새파일수: files.length,
+          새파일수: files?.length || 0,
-          files: files.map((f: any) => ({ objid: f.objid, name: f.realFileName }))
+          files: files?.map((f: any) => ({ objid: f.objid, name: f.realFileName })) || []
         });
         
         setUploadedFiles(files);
@@ -203,8 +380,18 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
   // 파일 선택 핸들러
   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입니다");
     }
   }, []);
 
@@ -265,16 +452,31 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     toast.loading("파일을 업로드하는 중...", { id: 'file-upload' });
 
     try {
-      // targetObjid 생성 (InteractiveDataTable과 호환)
+      // targetObjid 생성 - 템플릿 vs 데이터 파일 구분
       const tableName = formData?.tableName || component.tableName || 'default_table';
-      const recordId = formData?.id || 'temp_record';
+      const recordId = formData?.id;
+      const screenId = formData?.screenId;
       const columnName = component.columnName || component.id;
-      const targetObjid = `${tableName}:${recordId}:${columnName}`;
+      
+      let targetObjid;
+      if (recordId && tableName) {
+        // 실제 데이터 파일
+        targetObjid = `${tableName}:${recordId}:${columnName}`;
+        console.log("📁 실제 데이터 파일 업로드:", targetObjid);
+      } else if (screenId) {
+        // 템플릿 파일
+        targetObjid = `screen_${screenId}:${component.id}`;
+        console.log("🎨 템플릿 파일 업로드:", targetObjid);
+      } else {
+        // 기본값 (화면관리에서 사용)
+        targetObjid = `temp_${component.id}`;
+        console.log("📝 기본 파일 업로드:", targetObjid);
+      }
 
       const uploadData = {
         tableName: tableName,
         fieldName: columnName,
-        recordId: recordId,
+        recordId: recordId || `temp_${component.id}`,
         docType: component.fileConfig?.docType || 'DOCUMENT',
         docTypeName: component.fileConfig?.docTypeName || '일반 문서',
         targetObjid: targetObjid, // InteractiveDataTable 호환을 위한 targetObjid 추가
@@ -358,6 +560,13 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           globalFileState[component.id] = updatedFiles;
           (window as any).globalFileState = globalFileState;
           
+          // 🌐 전역 파일 저장소에 새 파일 등록 (페이지 간 공유용)
+          GlobalFileManager.registerFiles(newFiles, {
+            uploadPage: window.location.pathname,
+            componentId: component.id,
+            screenId: formData?.screenId,
+          });
+          
           // 모든 파일 컴포넌트에 동기화 이벤트 발생
           const syncEvent = new CustomEvent('globalFileStateChanged', {
             detail: {
@@ -429,6 +638,11 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         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 || '파일 업로드에 실패했습니다.');
@@ -436,15 +650,31 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     } catch (error) {
       console.error('파일 업로드 오류:', error);
       setUploadStatus('error');
-      toast.dismiss();
+      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(file.objid, file.realFileName);
+      await downloadFile({
+        fileId: file.objid,
+        serverFilename: file.savedFileName,
+        originalName: file.realFileName
+      });
       toast.success(`${file.realFileName} 다운로드 완료`);
     } catch (error) {
       console.error('파일 다운로드 오류:', error);
@@ -458,7 +688,8 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       const fileId = typeof file === 'string' ? file : file.objid;
       const fileName = typeof file === 'string' ? '파일' : file.realFileName;
       
-      await deleteFile(fileId);
+      const serverFilename = typeof file === 'string' ? 'temp_file' : file.savedFileName;
+      await deleteFile(fileId, serverFilename);
       
       const updatedFiles = uploadedFiles.filter(f => f.objid !== fileId);
       setUploadedFiles(updatedFiles);
@@ -512,25 +743,23 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     }
   }, [uploadedFiles, onUpdate, component.id]);
 
-  // 파일 뷰어
-  const handleFileView = useCallback((file: FileInfo) => {
-    setViewerFile(file);
-    setIsViewerOpen(true);
-  }, []);
-
-  const handleViewerClose = useCallback(() => {
-    setIsViewerOpen(false);
-    setViewerFile(null);
-  }, []);
-
   // 드래그 앤 드롭 핸들러
   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]);
+  }, [safeComponentConfig.readonly, safeComponentConfig.disabled, dragOver]);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -553,27 +782,53 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
   // 클릭 핸들러
   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} className={className}>
+    <div 
-      {/* 라벨 렌더링 */}
+      style={{
-      {component.label && component.style?.labelDisplay !== false && (
+        ...componentStyle,
+        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: "-25px",
+            top: "-20px",
             left: "0px",
-            fontSize: component.style?.labelFontSize || "14px",
+            fontSize: "12px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: "rgb(107, 114, 128)",
-            fontWeight: "500",
+            fontWeight: "400",
-            ...(isInteractive && component.style ? component.style : {}),
+            background: "transparent !important",
+            border: "none !important",
+            boxShadow: "none !important",
+            outline: "none !important",
+            padding: "0px !important",
+            margin: "0px !important"
           }}
         >
           {component.label}
@@ -581,18 +836,22 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             <span style={{ color: "#ef4444" }}>*</span>
           )}
         </label>
-      )}
+      )} */}
 
-      <div className="w-full h-full flex flex-col space-y-2">
+      <div
-        {/* 디자인 모드가 아닐 때만 파일 업로드 영역 표시 */}
+        className="w-full h-full flex flex-col space-y-2" 
-        {!isDesignMode && (
+        style={{ minHeight: '120px' }}
+      >
+        {/* 파일 업로드 영역 - 주석처리 */}
+        {/* {!isDesignMode && (
           <div
             className={`
-              border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
+              border border-dashed rounded p-2 text-center cursor-pointer transition-colors
               ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
               ${safeComponentConfig.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
               ${uploadStatus === 'uploading' ? 'opacity-75' : ''}
             `}
+            style={{ minHeight: '50px' }}
         onClick={handleClick}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
@@ -603,13 +862,13 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         <input
               ref={fileInputRef}
           type="file"
-              multiple={safeComponentConfig.multiple}
+          multiple={safeComponentConfig.multiple}
-              accept={safeComponentConfig.accept}
+          accept={safeComponentConfig.accept}
-              onChange={handleInputChange}
+          onChange={handleInputChange}
               className="hidden"
               disabled={safeComponentConfig.disabled}
             />
-
+            
             {uploadStatus === 'uploading' ? (
               <div className="flex flex-col items-center space-y-2">
                 <div className="flex items-center space-x-2">
@@ -620,60 +879,82 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             ) : (
               <>
                 <div>
-                  <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
+                  <Upload className="mx-auto h-6 w-6 text-gray-400 mb-2" />
-                  <p className="text-lg font-medium text-gray-900 mb-2">
+                  <p className="text-xs font-medium text-gray-600">
-                    {safeComponentConfig.dragDropText || "파일을 드래그하거나 클릭하여 업로드하세요"}
+                    파일 업로드
-                  </p>
-                  <p className="text-xs text-gray-500 mt-1">
-                    {safeComponentConfig.accept && `지원 형식: ${safeComponentConfig.accept}`}
-                    {safeComponentConfig.maxSize && ` • 최대 ${formatFileSize(safeComponentConfig.maxSize)}`}
-                    {safeComponentConfig.multiple && ' • 여러 파일 선택 가능'}
                   </p>
                 </div>
               </>
             )}
           </div>
-        )}
+        )} */}
 
-        {/* 업로드된 파일 목록 - 디자인 모드에서는 항상 표시 */}
+        {/* 업로드된 파일 목록 - 항상 표시 */}
-        {(uploadedFiles.length > 0 || isDesignMode) && (
+        {(() => {
+          const shouldShow = true; // 항상 표시하도록 강제
+          console.log("🎯🎯🎯 파일 목록 렌더링 조건 체크:", {
+            uploadedFilesLength: uploadedFiles.length,
+            isDesignMode: isDesignMode,
+            shouldShow: shouldShow,
+            uploadedFiles: uploadedFiles.map(f => ({ objid: f.objid, name: f.realFileName })),
+            "🚨 렌더링 여부": shouldShow ? "✅ 렌더링됨" : "❌ 렌더링 안됨"
+          });
+          return shouldShow;
+        })() && (
           <div className="flex-1 overflow-y-auto">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-700">
+                <h4 className="text-sm font-medium text-gray-700" style={{ textShadow: 'none', boxShadow: 'none' }}>
                   업로드된 파일 ({uploadedFiles.length})
                 </h4>
-                {uploadedFiles.length > 0 && (
+                <div className="flex items-center space-x-2">
-                  <Badge variant="secondary" className="text-xs">
+                  {uploadedFiles.length > 0 && (
-                    총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
+                    <Badge variant="secondary" className="text-xs">
-                  </Badge>
+                      총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
-                )}
+                    </Badge>
+                  )}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    onClick={() => setIsFileManagerOpen(true)}
+            style={{
+                      boxShadow: 'none !important', 
+                      textShadow: 'none !important',
+                      filter: 'none !important',
+                      WebkitBoxShadow: 'none !important',
+                      MozBoxShadow: 'none !important'
+                    }}
+                  >
+                    자세히보기
+                  </Button>
+                </div>
               </div>
 
               {uploadedFiles.length > 0 ? (
                 <div className="space-y-1">
                   {uploadedFiles.map((file) => (
-                    <div key={file.objid} className="flex items-center space-x-2 p-2 bg-gray-50 rounded text-sm">
+                    <div key={file.objid} className="flex items-center space-x-3 p-2 bg-gray-50 rounded text-sm hover:bg-gray-100 transition-colors" style={{ boxShadow: 'none', textShadow: 'none' }}>
                       <div className="flex-shrink-0">
                         {getFileIcon(file.fileExt)}
                       </div>
-                      <span className="flex-1 truncate text-gray-900">
+                      <span className="flex-1 truncate text-gray-900 cursor-pointer" onClick={() => handleFileView(file)} style={{ textShadow: 'none' }}>
                         {file.realFileName}
                       </span>
-                      <span className="text-xs text-gray-500">
+                      <span className="text-xs text-gray-500" style={{ textShadow: 'none' }}>
                         {formatFileSize(file.fileSize)}
                       </span>
                     </div>
                   ))}
-                  <div className="text-xs text-gray-500 mt-2 text-center">
+                  <div className="text-xs text-gray-500 mt-2 text-center" style={{ textShadow: 'none' }}>
-                    💡 파일 관리는 상세설정에서 가능합니다
+                    💡 파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
                   </div>
                 </div>
               ) : (
-                <div className="flex flex-col items-center justify-center py-8 text-gray-500">
+                <div className="flex flex-col items-center justify-center py-8 text-gray-500" style={{ textShadow: 'none' }}>
                   <File className="w-12 h-12 mb-3 text-gray-300" />
-                  <p className="text-sm font-medium">업로드된 파일이 없습니다</p>
+                  <p className="text-sm font-medium" style={{ textShadow: 'none' }}>업로드된 파일이 없습니다</p>
-                  <p className="text-xs text-gray-400 mt-1">상세설정에서 파일을 업로드하세요</p>
+                  <p className="text-xs text-gray-400 mt-1" style={{ textShadow: 'none' }}>상세설정에서 파일을 업로드하세요</p>
                 </div>
               )}
           </div>
@@ -694,6 +975,20 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         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}
+        config={safeComponentConfig}
+        isDesignMode={isDesignMode}
       />
     </div>
   );

frontend/lib/registry/components/file-upload/FileViewerModal.tsx

@@ -1,39 +1,176 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+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, Image as ImageIcon } from "lucide-react";
+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;
     }
 
@@ -49,16 +186,18 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
       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 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 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 textExtensions = ["txt", "md", "json", "xml", "csv"];
-        const mediaExtensions = ['mp4', 'webm', 'ogg', 'mp3', 'wav'];
+        const mediaExtensions = ["mp4", "webm", "ogg", "mp3", "wav"];
         
         const supportedExtensions = [
           ...imageExtensions, 
@@ -68,22 +207,97 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
         ];
         
         if (supportedExtensions.includes(fileExt)) {
-          // 실제 환경에서는 파일 서빙 API 엔드포인트 사용
+          // 이미지나 PDF는 인증된 요청으로 Blob 생성
-          const url = `/api/files/preview/${file.objid}`;
+          if (imageExtensions.includes(fileExt) || fileExt === "pdf") {
-          setPreviewUrl(url);
+            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);
+        console.error("미리보기 URL 생성 오류:", error);
-        setPreviewError('미리보기를 불러오는데 실패했습니다.');
+        setPreviewError("미리보기를 불러오는데 실패했습니다.");
       } finally {
         setIsLoading(false);
       }
     };
 
     generatePreviewUrl();
+    
+    // cleanup 함수 반환
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
   }, [file, isOpen]);
 
   if (!file) return null;
@@ -100,8 +314,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
 
     if (previewError) {
       return (
-        <div className="flex flex-col items-center justify-center h-96 text-gray-500">
+        <div className="flex flex-col items-center justify-center h-96">
-          <AlertTriangle className="w-16 h-16 mb-4" />
+          <AlertTriangle className="w-16 h-16 mb-4 text-yellow-500" />
           <p className="text-lg font-medium mb-2">미리보기 불가</p>
           <p className="text-sm text-center">{previewError}</p>
           <Button
@@ -119,121 +333,163 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
     const fileExt = file.fileExt.toLowerCase();
 
     // 이미지 파일
-    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(fileExt)) {
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(fileExt)) {
       return (
         <div className="flex items-center justify-center max-h-96 overflow-hidden">
           <img
-            src={previewUrl || ''}
+            src={previewUrl || ""}
             alt={file.realFileName}
-            className="max-w-full max-h-full object-contain rounded-lg"
+            className="max-w-full max-h-full object-contain rounded-lg shadow-lg"
-            onError={() => setPreviewError('이미지를 불러올 수 없습니다.')}
+            onError={(e) => {
+              console.error("이미지 로드 오류:", previewUrl, e);
+              setPreviewError("이미지를 불러올 수 없습니다. 파일이 손상되었거나 서버에서 접근할 수 없습니다.");
+            }}
+            onLoad={() => {
+              console.log("이미지 로드 성공:", previewUrl);
+            }}
           />
         </div>
       );
     }
 
     // 텍스트 파일
-    if (['txt', 'md', 'json', 'xml', 'csv'].includes(fileExt)) {
+    if (["txt", "md", "json", "xml", "csv"].includes(fileExt)) {
       return (
         <div className="h-96 overflow-auto">
           <iframe
-            src={previewUrl || ''}
+            src={previewUrl || ""}
             className="w-full h-full border rounded-lg"
-            title={`${file.realFileName} 미리보기`}
+            onError={() => setPreviewError("텍스트 파일을 불러올 수 없습니다.")}
-            onError={() => setPreviewError('텍스트 파일을 불러올 수 없습니다.')}
           />
         </div>
       );
     }
 
     // PDF 파일
-    if (fileExt === 'pdf') {
+    if (fileExt === "pdf") {
       return (
-        <div className="h-96">
+        <div className="h-96 overflow-auto">
           <iframe
-            src={previewUrl || ''}
+            src={previewUrl || ""}
             className="w-full h-full border rounded-lg"
-            title={`${file.realFileName} 미리보기`}
+            onError={() => setPreviewError("PDF 파일을 불러올 수 없습니다.")}
-            onError={() => setPreviewError('PDF 파일을 불러올 수 없습니다.')}
           />
         </div>
       );
     }
 
-    // Microsoft Office, 한컴오피스, Apple iWork 문서 파일
+    // Office 문서 (CDN 라이브러리 렌더링 또는 iframe)
-    if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'hwp', 'hwpx', 'hwpml', 'hcdt', 'hpt', 'pages', 'numbers', 'keynote'].includes(fileExt)) {
+    if (
-      // Office 파일은 Google Docs Viewer 또는 Microsoft Office Online을 통해 미리보기
+      ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "hwp", "hwpx", "hwpml", "hcdt", "hpt", "pages", "numbers", "keynote"].includes(fileExt)
-      const officeViewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(previewUrl || '')}`;
+    ) {
-      
+      // CDN 라이브러리로 렌더링된 콘텐츠가 있는 경우
-      return (
+      if (renderedContent) {
-        <div className="h-96">
+        return (
-          <iframe
+          <div className="relative h-96 overflow-auto">
-            src={officeViewerUrl}
+            <div 
-            className="w-full h-full border rounded-lg"
+              className="w-full h-full p-4 border rounded-lg bg-white"
-            title={`${file.realFileName} 미리보기`}
+              dangerouslySetInnerHTML={{ __html: renderedContent }}
-            onError={() => setPreviewError('Office 문서를 불러올 수 없습니다. 파일을 다운로드하여 확인해주세요.')}
+            />
-          />
-        </div>
-      );
-    }
-
-    // 기타 문서 파일 (RTF, ODT 등)
-    if (['rtf', 'odt', 'ods', 'odp'].includes(fileExt)) {
-      return (
-        <div className="flex flex-col items-center justify-center h-96 text-gray-500">
-          <FileText className="w-16 h-16 mb-4 text-blue-500" />
-          <p className="text-lg font-medium mb-2">{file.fileExt.toUpperCase()} 문서</p>
-          <p className="text-sm text-center mb-4">
-            {file.realFileName}
-          </p>
-          <div className="flex flex-col items-center space-y-2 text-xs text-gray-400">
-            <p>파일 크기: {formatFileSize(file.fileSize)}</p>
-            <p>문서 타입: {file.docTypeName || '일반 문서'}</p>
           </div>
-          <Button
+        );
-            variant="outline"
+      }
-            onClick={() => onDownload?.(file)}
+      
-            className="mt-4"
+      // iframe 방식 (fallback)
-          >
+      return (
-            <Download className="w-4 h-4 mr-2" />
+        <div className="relative h-96 overflow-auto">
-            파일 다운로드
+          <iframe
-          </Button>
+            src={previewUrl || ""}
+            className="w-full h-full border rounded-lg"
+            onError={() => {
+              console.log("iframe 오류 발생, fallback 옵션 제공");
+              setPreviewError("이 Office 문서는 브라우저에서 직접 미리보기할 수 없습니다. 다운로드하여 확인해주세요.");
+            }}
+            title={`${file.realFileName} 미리보기`}
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+            onLoad={() => setIsLoading(false)}
+          />
+          
+          {/* 로딩 상태 */}
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+                <p className="text-sm text-gray-600">Office 문서를 처리하는 중...</p>
+                <p className="text-xs text-gray-400 mt-1">잠시만 기다려주세요</p>
+              </div>
+            </div>
+          )}
+          
+          {/* 오류 발생 시 fallback 옵션 */}
+          {previewError && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-white">
+              <FileText className="w-16 h-16 mb-4 text-orange-500" />
+              <p className="text-lg font-medium mb-2">미리보기 제한</p>
+              <p className="text-sm text-center mb-4 text-gray-600">
+                {previewError}
+              </p>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => onDownload?.(file)}
+                >
+                  <Download className="w-4 h-4 mr-2" />
+                  다운로드
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    // 새 탭에서 파일 열기 시도
+                    const link = document.createElement('a');
+                    link.href = previewUrl || '';
+                    link.target = '_blank';
+                    link.click();
+                  }}
+                >
+                  <ExternalLink className="w-4 h-4 mr-2" />
+                  새 탭에서 열기
+                </Button>
+              </div>
+            </div>
+          )}
         </div>
       );
     }
 
     // 비디오 파일
-    if (['mp4', 'webm', 'ogg'].includes(fileExt)) {
+    if (["mp4", "webm", "ogg"].includes(fileExt)) {
       return (
         <div className="flex items-center justify-center">
           <video
             controls
-            className="max-w-full max-h-96 rounded-lg"
+            className="w-full max-h-96"
-            onError={() => setPreviewError('비디오를 재생할 수 없습니다.')}
+            onError={() => setPreviewError("비디오를 재생할 수 없습니다.")}
           >
-            <source src={previewUrl || ''} type={`video/${fileExt}`} />
+            <source src={previewUrl || ""} type={`video/${fileExt}`} />
-            브라우저가 비디오 재생을 지원하지 않습니다.
           </video>
         </div>
       );
     }
 
     // 오디오 파일
-    if (['mp3', 'wav', 'ogg'].includes(fileExt)) {
+    if (["mp3", "wav", "ogg"].includes(fileExt)) {
       return (
         <div className="flex flex-col items-center justify-center h-96">
           <div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6">
             <svg className="w-16 h-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" />
+              <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('오디오를 재생할 수 없습니다.')}
+            onError={() => setPreviewError("오디오를 재생할 수 없습니다.")}
           >
-            <source src={previewUrl || ''} type={`audio/${fileExt}`} />
+            <source src={previewUrl || ""} type={`audio/${fileExt}`} />
-            브라우저가 오디오 재생을 지원하지 않습니다.
           </audio>
         </div>
       );
@@ -241,8 +497,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
 
     // 기타 파일 타입
     return (
-      <div className="flex flex-col items-center justify-center h-96 text-gray-500">
+      <div className="flex flex-col items-center justify-center h-96">
-        <FileText className="w-16 h-16 mb-4" />
+        <FileText className="w-16 h-16 mb-4 text-gray-400" />
         <p className="text-lg font-medium mb-2">미리보기 불가</p>
         <p className="text-sm text-center mb-4">
           {file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.
@@ -259,8 +515,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={() => {}}>
-      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden">
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
@@ -271,40 +527,54 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({
                 {file.fileExt.toUpperCase()}
               </Badge>
             </div>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onDownload?.(file)}
-              >
-                <Download className="w-4 h-4 mr-2" />
-                다운로드
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onClose}
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-          
-          {/* 파일 정보 */}
-          <div className="flex items-center space-x-4 text-sm text-gray-500 mt-2">
-            <span>크기: {formatFileSize(file.fileSize)}</span>
-            {file.uploadedAt && (
-              <span>업로드: {new Date(file.uploadedAt).toLocaleString()}</span>
-            )}
-            {file.writer && <span>작성자: {file.writer}</span>}
           </div>
+          <DialogDescription>
+            파일 크기: {formatFileSize(file.size)} | 파일 형식: {file.fileExt.toUpperCase()}
+          </DialogDescription>
         </DialogHeader>
-
+        
-        {/* 파일 미리보기 영역 */}
+        <div className="flex-1 overflow-y-auto">
-        <div className="flex-1 overflow-auto py-4">
           {renderPreview()}
         </div>
+
+        {/* 파일 정보 및 액션 버튼 */}
+        <div className="flex items-center space-x-4 text-sm text-gray-500 mt-2">
+          <span>크기: {formatFileSize(file.size)}</span>
+          {file.uploadedAt && (
+            <span>업로드: {new Date(file.uploadedAt).toLocaleString()}</span>
+          )}
+        </div>
+
+        <div className="flex justify-end space-x-2 pt-4 border-t">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onDownload?.(file)}
+          >
+            <Download className="w-4 h-4 mr-2" />
+            다운로드
+          </Button>
+          {onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-red-600 hover:text-red-700 hover:bg-red-50"
+              onClick={() => onDelete(file)}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              삭제
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+          >
+            <X className="w-4 h-4 mr-2" />
+            닫기
+          </Button>
+        </div>
       </DialogContent>
     </Dialog>
   );
-};
+};

frontend/lib/registry/components/file-upload/types.ts

@@ -13,14 +13,14 @@ export interface FileInfo {
   fileSize: number;
   fileExt: string;
   filePath: string;
-  docType: string;
+  docType?: string;
-  docTypeName: string;
+  docTypeName?: string;
   targetObjid: string;
   parentTargetObjid?: string;
-  companyCode: string;
+  companyCode?: string;
-  writer: string;
+  writer?: string;
-  regdate: string;
+  regdate?: string;
-  status: string;
+  status?: string;
 
   // 추가 호환성 속성들
   path?: string; // filePath와 동일
@@ -97,6 +97,7 @@ export type FileUploadStatus = 'idle' | 'uploading' | 'success' | 'error';
 export interface FileUploadResponse {
   success: boolean;
   data?: FileInfo[];
+  files?: FileInfo[];
   message?: string;
   error?: string;
 }

frontend/lib/utils/componentTypeUtils.ts

@@ -0,0 +1,123 @@
+/**
+ * 컴포넌트 타입 유틸리티
+ * 레거시와 신규 컴포넌트 시스템 모두 지원하는 타입 감지 함수들
+ */
+
+import { ComponentData } from "@/types/screen";
+
+/**
+ * 파일 컴포넌트 여부를 확인합니다
+ * 
+ * 지원하는 타입:
+ * - 레거시: type="file"
+ * - 레거시: type="widget" + widgetType="file"  
+ * - 신규: type="component" + widgetType="file"
+ * - 신규: type="component" + componentType="file-upload"
+ * - 신규: type="component" + componentConfig.webType="file"
+ */
+export const isFileComponent = (component: ComponentData): boolean => {
+  return component.type === "file" || 
+         (component.type === "widget" && (component as any).widgetType === "file") ||
+         (component.type === "component" && 
+          ((component as any).widgetType === "file" ||                           // ✅ ScreenDesigner에서 설정됨
+           (component as any).componentType === "file-upload" ||                 // ✅ ComponentRegistry ID
+           (component as any).componentConfig?.webType === "file"));             // ✅ componentConfig 내부
+};
+
+/**
+ * 버튼 컴포넌트 여부를 확인합니다
+ */
+export const isButtonComponent = (component: ComponentData): boolean => {
+  return component.type === "button" ||
+         (component.type === "widget" && (component as any).widgetType === "button") ||
+         (component.type === "component" && 
+          ((component as any).webType === "button" ||
+           (component as any).componentType === "button"));
+};
+
+/**
+ * 데이터 테이블 컴포넌트 여부를 확인합니다
+ */
+export const isDataTableComponent = (component: ComponentData): boolean => {
+  return component.type === "datatable" ||
+         (component.type === "component" && 
+          ((component as any).componentType === "datatable" ||
+           (component as any).componentType === "data-table"));
+};
+
+/**
+ * 위젯 컴포넌트 여부를 확인합니다
+ */
+export const isWidgetComponent = (component: ComponentData): boolean => {
+  return component.type === "widget";
+};
+
+/**
+ * 컴포넌트의 웹타입을 가져옵니다
+ */
+export const getComponentWebType = (component: ComponentData): string | undefined => {
+  // 파일 컴포넌트는 무조건 "file" 웹타입 반환
+  if (isFileComponent(component)) {
+    console.log(`🎯 파일 컴포넌트 감지 → webType: "file" 반환`, {
+      componentId: component.id,
+      componentType: component.type,
+      widgetType: (component as any).widgetType,
+      componentConfig: (component as any).componentConfig
+    });
+    return "file";
+  }
+  
+  if (component.type === "widget") {
+    return (component as any).widgetType;
+  }
+  if (component.type === "component") {
+    return (component as any).widgetType || (component as any).componentConfig?.webType;
+  }
+  return component.type;
+};
+
+/**
+ * 컴포넌트의 실제 타입을 가져옵니다 (신규 시스템용)
+ */
+export const getComponentType = (component: ComponentData): string => {
+  if (component.type === "component") {
+    return (component as any).componentType || (component as any).webType || "unknown";
+  }
+  return component.type;
+};
+
+/**
+ * 컴포넌트가 입력 가능한 컴포넌트인지 확인합니다
+ */
+export const isInputComponent = (component: ComponentData): boolean => {
+  const inputTypes = ["text", "number", "email", "password", "tel", "url", "search", 
+                     "textarea", "select", "checkbox", "radio", "date", "time", 
+                     "datetime-local", "file", "code", "entity"];
+  
+  const webType = getComponentWebType(component);
+  return webType ? inputTypes.includes(webType) : false;
+};
+
+/**
+ * 컴포넌트가 표시용 컴포넌트인지 확인합니다
+ */
+export const isDisplayComponent = (component: ComponentData): boolean => {
+  const displayTypes = ["label", "text", "image", "video", "chart", "table", "datatable"];
+  
+  const webType = getComponentWebType(component);
+  return webType ? displayTypes.includes(webType) : false;
+};
+
+/**
+ * 컴포넌트의 필드명을 가져옵니다
+ */
+export const getComponentFieldName = (component: ComponentData): string => {
+  return (component as any).columnName || component.id;
+};
+
+/**
+ * 컴포넌트의 라벨을 가져옵니다
+ */
+export const getComponentLabel = (component: ComponentData): string => {
+  return (component as any).label || (component as any).title || component.id;
+};

frontend/package-lock.json

@@ -39,7 +39,9 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
+        "docx-preview": "^0.3.6",
         "lucide-react": "^0.525.0",
+        "mammoth": "^1.11.0",
         "next": "15.4.4",
         "react": "19.1.0",
         "react-day-picker": "^9.9.0",
@@ -47,8 +49,10 @@
         "react-hook-form": "^7.62.0",
         "react-hot-toast": "^2.6.0",
         "react-window": "^2.1.0",
+        "sheetjs-style": "^0.15.8",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
+        "xlsx": "^0.18.5",
         "zod": "^4.1.5"
       },
       "devDependencies": {
@@ -3341,6 +3345,15 @@
         "win32"
       ]
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.11",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+      "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@xyflow/react": {
       "version": "12.8.4",
       "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.4.tgz",
@@ -3396,6 +3409,22 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "adler32": "bin/adler32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3695,6 +3724,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -3827,6 +3882,28 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/cfb/node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3929,6 +4006,28 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "bin": {
+        "codepage": "bin/codepage.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage/node_modules/commander": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
+      "license": "MIT"
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -3986,6 +4085,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4010,6 +4115,24 @@
         "node": "^14.18.0 || >=16.10.0"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4323,6 +4446,12 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/dingbat-to-unicode": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz",
+      "integrity": "sha512-98l0sW87ZT58pU4i61wa2OHwxbiYSbuxsCBozaVnYX2iCnr3bLM3fIes1/ej7h1YdOKuKt/MLs706TVnALA65w==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -4336,6 +4465,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/docx-preview": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/docx-preview/-/docx-preview-0.3.6.tgz",
+      "integrity": "sha512-gKVPE18hlpfuhQHiptsw1rbOwzQeGSwK10/w7hv1ZMEqHmjtCuTpz6AUMfu1twIPGxgpcsMXThKI6B6WsP3L1w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jszip": ">=3.0.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -4349,6 +4487,15 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/duck": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/duck/-/duck-0.1.12.tgz",
+      "integrity": "sha512-wkctla1O6VfP89gQ+J/yDesM0S7B7XLXjKGzXxMDVFg7uEn706niAtyYovKbyq1oT9YwDcly721/iUWoc8MVRg==",
+      "license": "BSD",
+      "dependencies": {
+        "underscore": "^1.13.1"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5064,6 +5211,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
@@ -5278,6 +5434,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5592,6 +5757,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5619,6 +5790,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -6154,6 +6331,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6198,6 +6387,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -6473,6 +6671,17 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lop": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
+      "integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "duck": "^0.1.12",
+        "option": "~0.2.1",
+        "underscore": "^1.13.1"
+      }
+    },
     "node_modules/lucide-react": {
       "version": "0.525.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
@@ -6492,6 +6701,39 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mammoth": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.11.0.tgz",
+      "integrity": "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.6",
+        "argparse": "~1.0.3",
+        "base64-js": "^1.5.1",
+        "bluebird": "~3.4.0",
+        "dingbat-to-unicode": "^1.0.1",
+        "jszip": "^3.7.1",
+        "lop": "^0.4.2",
+        "path-is-absolute": "^1.0.0",
+        "underscore": "^1.13.1",
+        "xmlbuilder": "^10.0.0"
+      },
+      "bin": {
+        "mammoth": "bin/mammoth"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/mammoth/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6893,6 +7135,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/option": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/option/-/option-0.2.4.tgz",
+      "integrity": "sha512-pkEqbDyl8ou5cpq+VsnQbe/WlEy5qS7xPzMS1U55OCG9KPvwFD46zDbxQIj3egJSFc3D+XhYOPUzz49zQAVy7A==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6961,6 +7209,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6984,6 +7238,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -7211,6 +7474,18 @@
         }
       }
     },
+    "node_modules/printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "printj": "bin/printj.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/prisma": {
       "version": "6.16.1",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.16.1.tgz",
@@ -7237,6 +7512,12 @@
         }
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7475,6 +7756,27 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -7629,6 +7931,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -7732,6 +8040,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
@@ -7798,6 +8112,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/sheetjs-style": {
+      "version": "0.15.8",
+      "resolved": "https://registry.npmjs.org/sheetjs-style/-/sheetjs-style-0.15.8.tgz",
+      "integrity": "sha512-/wRiwnq5ck7aO+zLBs+u5JqQK4agUTIGCS0nxgaMjFl6XdlVaaB/RNJcP6S6Efj3+RYbSZuAoyqmSnbzxfT7Kg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "ssf": "~0.10.3",
+        "wmf": "~1.0.1"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -7903,6 +8239,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ssf": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
+      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "bin": {
+        "ssf": "bin/ssf.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -7924,6 +8281,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -8408,6 +8774,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/underscore": {
+      "version": "1.13.7",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz",
+      "integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -8512,6 +8884,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8617,6 +8995,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -8627,6 +9023,66 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx/node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx/node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx/node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-10.1.1.tgz",
+      "integrity": "sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",

frontend/package.json

@@ -47,7 +47,9 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "docx-preview": "^0.3.6",
     "lucide-react": "^0.525.0",
+    "mammoth": "^1.11.0",
     "next": "15.4.4",
     "react": "19.1.0",
     "react-day-picker": "^9.9.0",
@@ -55,8 +57,10 @@
     "react-hook-form": "^7.62.0",
     "react-hot-toast": "^2.6.0",
     "react-window": "^2.1.0",
+    "sheetjs-style": "^0.15.8",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
+    "xlsx": "^0.18.5",
     "zod": "^4.1.5"
   },
   "devDependencies": {

frontend/types/screen-management.ts

@@ -114,6 +114,9 @@ export interface FileComponent extends BaseComponent {
   type: "file";
   fileConfig: FileTypeConfig;
   uploadedFiles?: UploadedFile[];
+  columnName?: string;
+  tableName?: string;
+  lastFileUpdate?: number;
 }
 
 /**
@@ -193,12 +196,21 @@ export interface TextTypeConfig {
  * 파일 타입 설정
  */
 export interface FileTypeConfig {
-  accept?: string;
+  accept?: string[];
   multiple?: boolean;
-  maxSize?: number; // bytes
+  maxSize?: number; // MB
   maxFiles?: number;
-  preview?: boolean;
+  showPreview?: boolean;
+  showProgress?: boolean;
   docType?: string;
+  docTypeName?: string;
+  dragDropText?: string;
+  uploadButtonText?: string;
+  autoUpload?: boolean;
+  chunkedUpload?: boolean;
+  linkedTable?: string;
+  linkedField?: string;
+  autoLink?: boolean;
   companyCode?: CompanyCode;
 }
 
@@ -272,6 +284,8 @@ export interface UploadedFile {
   filePath: string;
   docType?: string;
   docTypeName?: string;
+  targetObjid: string;
+  parentTargetObjid?: string;
   writer?: string;
   regdate?: string;
   status?: "uploading" | "completed" | "error";

test-upload.txt

@@ -0,0 +1 @@
+테스트 파일입니다.