화면 바로 들어가지게 함

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -17,6 +17,7 @@ import { isFileComponent, isDataTableComponent, isButtonComponent } from "@/lib/
 import { FlowButtonGroup } from "./widgets/FlowButtonGroup";
 import { FlowVisibilityConfig } from "@/types/control-management";
 import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
@@ -47,6 +48,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   hideLabel = false,
   screenInfo,
 }) => {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth();
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
@@ -405,7 +407,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             await handleCustomAction();
             break;
           default:
-            // console.log("🔘 기본 버튼 클릭");
+          // console.log("🔘 기본 버튼 클릭");
         }
       } catch (error) {
         // console.error("버튼 액션 오류:", error);
@@ -437,9 +439,10 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     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]) 
+    const screenId =
+      screenInfo?.screenId ||
+      (typeof window !== "undefined" && window.location.pathname.includes("/screens/")
+        ? parseInt(window.location.pathname.split("/screens/")[1])
         : null);
 
     return (
@@ -455,8 +458,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             disabled: readonly,
           }}
           componentStyle={{
-            width: '100%',
-            height: '100%',
+            width: "100%",
+            height: "100%",
           }}
           className="h-full w-full"
           isInteractive={true}
@@ -465,12 +468,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             screenId, // 🎯 화면 ID 전달
             // 🎯 백엔드 API가 기대하는 정확한 형식으로 설정
             autoLink: true, // 자동 연결 활성화
-            linkedTable: 'screen_files', // 연결 테이블
+            linkedTable: "screen_files", // 연결 테이블
             recordId: screenId, // 레코드 ID
             columnName: fieldName, // 컬럼명 (중요!)
             isVirtualFileColumn: true, // 가상 파일 컬럼
             id: formData.id,
-            ...formData
+            ...formData,
           }}
           onFormDataChange={(data) => {
             // console.log("📝 실제 화면 파일 업로드 완료:", data);
@@ -486,50 +489,54 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
               hasUploadedFiles: !!updates.uploadedFiles,
               filesCount: updates.uploadedFiles?.length || 0,
               hasLastFileUpdate: !!updates.lastFileUpdate,
-              updates
+              updates,
             });
-            
+
             // 파일 업로드/삭제 완료 시 formData 업데이터
             if (updates.uploadedFiles && onFormDataChange) {
               onFormDataChange(fieldName, updates.uploadedFiles);
             }
-            
+
             // 🎯 화면설계 모드와 동기화를 위한 전역 이벤트 발생 (업로드/삭제 모두)
-            if (updates.uploadedFiles !== undefined && typeof window !== 'undefined') {
+            if (updates.uploadedFiles !== undefined && typeof window !== "undefined") {
               // 업로드인지 삭제인지 판단 (lastFileUpdate가 있으면 변경사항 있음)
-              const action = updates.lastFileUpdate ? 'update' : 'sync';
-              
+              const action = updates.lastFileUpdate ? "update" : "sync";
+
               const eventDetail = {
                 componentId: comp.id,
                 files: updates.uploadedFiles,
                 fileCount: updates.uploadedFiles.length,
                 action: action,
                 timestamp: updates.lastFileUpdate || Date.now(),
-                source: 'realScreen' // 실제 화면에서 온 이벤트임을 표시
+                source: "realScreen", // 실제 화면에서 온 이벤트임을 표시
               };
-              
+
               // console.log("🚀🚀🚀 실제 화면 파일 변경 이벤트 발생:", eventDetail);
-              
-              const event = new CustomEvent('globalFileStateChanged', {
-                detail: eventDetail
+
+              const event = new CustomEvent("globalFileStateChanged", {
+                detail: eventDetail,
               });
               window.dispatchEvent(event);
-              
+
               // console.log("✅✅✅ 실제 화면 → 화면설계 모드 동기화 이벤트 발생 완료");
-              
+
               // 추가 지연 이벤트들 (화면설계 모드가 열려있을 때를 대비)
               setTimeout(() => {
                 // console.log("🔄 실제 화면 추가 이벤트 발생 (지연 100ms)");
-                window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                  detail: { ...eventDetail, delayed: true }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("globalFileStateChanged", {
+                    detail: { ...eventDetail, delayed: true },
+                  }),
+                );
               }, 100);
-              
+
               setTimeout(() => {
                 // console.log("🔄 실제 화면 추가 이벤트 발생 (지연 500ms)");
-                window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                  detail: { ...eventDetail, delayed: true, attempt: 2 }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("globalFileStateChanged", {
+                    detail: { ...eventDetail, delayed: true, attempt: 2 },
+                  }),
+                );
               }, 500);
             }
           }}