파일 업로드 기능 구현 및 상세설정 연동

- 템플릿 파일첨부 컴포넌트와 FileComponentConfigPanel 실시간 동기화
- FileUpload 위젯에 전역 파일 상태 관리 기능 추가
- 파일 업로드/삭제 시 전역 상태 및 localStorage 동기화
- RealtimePreview에서 전역 상태 우선 읽기 및 파일 개수 표시
- 한컴오피스, Apple iWork 파일 형식 지원 추가
- 파일 뷰어 모달 및 미리보기 기능 구현
- 업로드된 파일 디렉토리 .gitignore 추가

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -8,6 +8,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { uploadFilesAndCreateData } from "@/lib/api/file";
 import { toast } from "sonner";
 import { ComponentData, WidgetComponent, DataTableComponent, FileComponent, ButtonTypeConfig } from "@/types/screen";
+import { FileUploadComponent } from "@/lib/registry/components/file-upload/FileUploadComponent";
 import { InteractiveDataTable } from "./InteractiveDataTable";
 import { DynamicWebTypeRenderer } from "@/lib/registry";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
@@ -412,40 +413,30 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const { label, readonly } = comp;
     const fieldName = comp.columnName || comp.id;
 
-    const handleFileUpload = async (files: File[]) => {
-      if (!screenInfo?.tableName) {
-        toast.error("테이블명이 설정되지 않았습니다.");
-        return;
-      }
-
-      try {
-        const uploadData = {
-          files,
-          tableName: screenInfo.tableName,
-          fieldName,
-          recordId: formData.id || undefined,
-        };
-
-        const response = await uploadFilesAndCreateData(uploadData);
-
-        if (response.success) {
-          toast.success("파일이 성공적으로 업로드되었습니다.");
-          handleFormDataChange(fieldName, response.data);
-        } else {
-          toast.error("파일 업로드에 실패했습니다.");
-        }
-      } catch (error) {
-        console.error("파일 업로드 오류:", error);
-        toast.error("파일 업로드 중 오류가 발생했습니다.");
-      }
-    };
-
     return (
       <div className="h-full w-full">
-        {/* 파일 업로드 컴포넌트는 기존 구현 사용 */}
-        <div className="rounded border border-dashed p-2 text-sm text-gray-500">
-          파일 업로드 영역 (동적 렌더링 예정)
-        </div>
+        {/* 실제 FileUploadComponent 사용 */}
+        <FileUploadComponent
+          component={{
+            ...comp,
+            config: {
+              ...comp.fileConfig,
+              multiple: comp.fileConfig?.multiple !== false,
+              accept: comp.fileConfig?.accept || "*/*",
+              maxSize: (comp.fileConfig?.maxSize || 10) * 1024 * 1024, // MB to bytes
+              disabled: readonly,
+            }
+          }}
+          isInteractive={true}
+          formData={{
+            tableName: screenInfo?.tableName,
+            id: formData.id,
+          }}
+          onFormDataChange={(fieldName, value) => {
+            console.log("📝 파일 업로드 완료:", { fieldName, value });
+            handleFormDataChange(fieldName, value);
+          }}
+        />
       </div>
     );
   };