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

frontend/components/screen/widgets/FileUpload.tsx

@@ -504,6 +504,26 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
           [component.id]: updatedFiles
         }));
 
+        // RealtimePreview 동기화를 위한 추가 이벤트 발생
+        if (typeof window !== 'undefined') {
+          const eventDetail = {
+            componentId: component.id,
+            files: updatedFiles,
+            fileCount: updatedFiles.length,
+            action: 'upload',
+            timestamp: Date.now()
+          };
+          
+          console.log("🚀 FileUpload 위젯 이벤트 발생:", eventDetail);
+          
+          const event = new CustomEvent('globalFileStateChanged', {
+            detail: eventDetail
+          });
+          window.dispatchEvent(event);
+          
+          console.log("✅ FileUpload globalFileStateChanged 이벤트 발생 완료");
+        }
+
         // 컴포넌트 업데이트 (옵셔널)
         if (onUpdateComponent) {
           onUpdateComponent({
@@ -583,6 +603,42 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         [component.id]: filteredFiles
       }));
 
+      // 🎯 화면설계 모드와 동기화를 위한 전역 이벤트 발생
+      if (typeof window !== 'undefined') {
+        const eventDetail = {
+          componentId: component.id,
+          files: filteredFiles,
+          fileCount: filteredFiles.length,
+          action: 'delete',
+          timestamp: Date.now(),
+          source: 'realScreen' // 실제 화면에서 온 이벤트임을 표시
+        };
+        
+        console.log("🚀🚀🚀 FileUpload 위젯 삭제 이벤트 발생:", eventDetail);
+        
+        const event = new CustomEvent('globalFileStateChanged', {
+          detail: eventDetail
+        });
+        window.dispatchEvent(event);
+        
+        console.log("✅✅✅ FileUpload 위젯 → 화면설계 모드 동기화 이벤트 발생 완료");
+        
+        // 추가 지연 이벤트들
+        setTimeout(() => {
+          console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 100ms)");
+          window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
+            detail: { ...eventDetail, delayed: true }
+          }));
+        }, 100);
+        
+        setTimeout(() => {
+          console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 300ms)");
+          window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
+            detail: { ...eventDetail, delayed: true, attempt: 2 }
+          }));
+        }, 300);
+      }
+
       onUpdateComponent({
         uploadedFiles: filteredFiles,
       });
@@ -635,8 +691,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     <div className="w-full space-y-4">
       {/* 드래그 앤 드롭 영역 */}
       <div
-        className={`rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
-          isDragOver ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400"
+        className={`rounded-xl border-2 border-dashed p-8 text-center transition-all duration-300 ${
+          isDragOver ? "border-blue-400 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm" : "border-gray-300/60 hover:border-blue-400/60 hover:bg-gray-50/50 hover:shadow-sm"
         }`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -648,7 +704,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         </p>
         <p className="mb-4 text-sm text-gray-500">또는 클릭하여 파일을 선택하세요</p>
 
-        <Button variant="outline" onClick={handleFileInputClick} className="mb-4">
+        <Button variant="outline" onClick={handleFileInputClick} className="mb-4 rounded-lg border-gray-300/60 hover:border-blue-400/60 hover:bg-blue-50/50 transition-all duration-200">
           <Upload className="mr-2 h-4 w-4" />
           {fileConfig.uploadButtonText || "파일 선택"}
         </Button>