ui, 파일업로드 관련 손보기

frontend/components/screen/RealtimePreview.tsx

@@ -127,31 +127,15 @@ const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) =
     className: `w-full h-full ${borderClass}`,
   };
 
-  // 파일 컴포넌트 강제 체크
+  // 파일 컴포넌트는 별도 로직에서 처리하므로 여기서는 제외
   if (isFileComponent(widget)) {
-    console.log("🎯 RealtimePreview - 파일 컴포넌트 강제 감지:", {
+    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>;
-    }
+    return <div className="text-xs text-gray-500 p-2">파일 컴포넌트 (별도 렌더링)</div>;
   }
 
   // 동적 웹타입 렌더링 사용
@@ -242,24 +226,84 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 전역 파일 상태 변경 감지 (해당 컴포넌트만)
   useEffect(() => {
     const handleGlobalFileStateChange = (event: CustomEvent) => {
+      console.log("🎯🎯🎯 RealtimePreview 이벤트 수신:", {
+        eventComponentId: event.detail.componentId,
+        currentComponentId: component.id,
+        isMatch: event.detail.componentId === component.id,
+        filesCount: event.detail.files?.length || 0,
+        action: event.detail.action,
+        delayed: event.detail.delayed || false,
+        attempt: event.detail.attempt || 1,
+        eventDetail: event.detail
+      });
+      
       if (event.detail.componentId === component.id) {
-        console.log("🔄 RealtimePreview 파일 상태 변경 감지:", {
+        console.log("✅✅✅ RealtimePreview 파일 상태 변경 감지 - 리렌더링 시작:", {
           componentId: component.id,
           filesCount: event.detail.files?.length || 0,
-          action: event.detail.action
+          action: event.detail.action,
+          oldTrigger: fileUpdateTrigger,
+          delayed: event.detail.delayed || false,
+          attempt: event.detail.attempt || 1
+        });
+        setFileUpdateTrigger(prev => {
+          const newTrigger = prev + 1;
+          console.log("🔄🔄🔄 fileUpdateTrigger 업데이트:", { 
+            old: prev, 
+            new: newTrigger,
+            componentId: component.id,
+            attempt: event.detail.attempt || 1
+          });
+          return newTrigger;
+        });
+      } else {
+        console.log("❌ 컴포넌트 ID 불일치:", {
+          eventComponentId: event.detail.componentId,
+          currentComponentId: component.id
+        });
+      }
+    };
+
+    // 강제 업데이트 함수 등록
+    const forceUpdate = (componentId: string, files: any[]) => {
+      console.log("🔥🔥🔥 RealtimePreview 강제 업데이트 호출:", {
+        targetComponentId: componentId,
+        currentComponentId: component.id,
+        isMatch: componentId === component.id,
+        filesCount: files.length
+      });
+      
+      if (componentId === component.id) {
+        console.log("✅✅✅ RealtimePreview 강제 업데이트 적용:", {
+          componentId: component.id,
+          filesCount: files.length,
+          oldTrigger: fileUpdateTrigger
+        });
+        setFileUpdateTrigger(prev => {
+          const newTrigger = prev + 1;
+          console.log("🔄🔄🔄 강제 fileUpdateTrigger 업데이트:", { 
+            old: prev, 
+            new: newTrigger,
+            componentId: component.id 
+          });
+          return newTrigger;
         });
-        setFileUpdateTrigger(prev => prev + 1);
       }
     };
 
     if (typeof window !== 'undefined') {
       window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
       
+      // 전역 강제 업데이트 함수 등록
+      if (!(window as any).forceRealtimePreviewUpdate) {
+        (window as any).forceRealtimePreviewUpdate = forceUpdate;
+      }
+      
       return () => {
         window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
       };
     }
-  }, [component.id]);
+  }, [component.id, fileUpdateTrigger]);
 
   // 컴포넌트 스타일 계산
   const componentStyle = {
@@ -350,8 +394,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           </div>
         )}
 
-        {/* 위젯 타입 - 동적 렌더링 */}
-        {type === "widget" && (
+        {/* 위젯 타입 - 동적 렌더링 (파일 컴포넌트 제외) */}
+        {type === "widget" && !isFileComponent(component) && (
           <div className="flex h-full flex-col">
             <div className="pointer-events-none flex-1">
               <WidgetRenderer component={component} />
@@ -383,7 +427,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           });
           
           return (
-            <div className="flex h-full flex-col">
+            <div key={`file-component-${component.id}-${fileUpdateTrigger}`} className="flex h-full flex-col">
               <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
                 {currentFiles.length > 0 ? (
                   <div className="h-full overflow-y-auto">