제어관리 개선판

frontend/components/screen/RealtimePreview.tsx

@@ -55,6 +55,7 @@ import {
 interface RealtimePreviewProps {
   component: ComponentData;
   isSelected?: boolean;
+  isDesignMode?: boolean;
   onClick?: (e?: React.MouseEvent) => void;
   onDragStart?: (e: React.DragEvent) => void;
   onDragEnd?: () => void;
@@ -104,7 +105,7 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
 };
 
 // 동적 웹 타입 위젯 렌더링 컴포넌트
-const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) => {
+const WidgetRenderer: React.FC<{ component: ComponentData; isDesignMode?: boolean }> = ({ component, isDesignMode = false }) => {
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (!isWidgetComponent(component)) {
     return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
@@ -151,6 +152,8 @@ const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) =
             component: widget,
             value: undefined, // 미리보기이므로 값은 없음
             readonly: readonly,
+            isDesignMode,
+            isInteractive: !isDesignMode,
           }}
           config={widget.webTypeConfig}
         />
@@ -215,6 +218,7 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
 export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   component,
   isSelected = false,
+  isDesignMode = false,
   onClick,
   onDragStart,
   onDragEnd,
@@ -515,7 +519,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         {/* 위젯 타입 - 동적 렌더링 (파일 컴포넌트 제외) */}
         {type === "widget" && !isFileComponent(component) && (
           <div className="pointer-events-none h-full w-full">
-            <WidgetRenderer component={component} />
+            <WidgetRenderer component={component} isDesignMode={isDesignMode} />
           </div>
         )}