문서뷰어기능구현

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