선택항목 상게입력 컴포넌트 구현

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -60,6 +60,9 @@ interface RealtimePreviewProps {
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   columnOrder?: string[];
+  
+  // 🆕 조건부 컨테이너 높이 변화 콜백
+  onHeightChange?: (componentId: string, newHeight: number) => void;
 }
 
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
@@ -123,6 +126,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onFlowRefresh,
   formData,
   onFormDataChange,
+  onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
 }) => {
   const [actualHeight, setActualHeight] = React.useState<number | null>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -225,6 +229,12 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   };
 
   const getHeight = () => {
+    // 🆕 조건부 컨테이너는 높이를 자동으로 설정 (내용물에 따라 자동 조정)
+    const isConditionalContainer = (component as any).componentType === "conditional-container";
+    if (isConditionalContainer && !isDesignMode) {
+      return "auto"; // 런타임에서는 내용물 높이에 맞춤
+    }
+
     // 플로우 위젯의 경우 측정된 높이 사용
     const isFlowWidget = component.type === "component" && (component as any).componentType === "flow-widget";
     if (isFlowWidget && actualHeight) {
@@ -325,7 +335,12 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
             (contentRef as any).current = node;
           }
         }}
-        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} overflow-visible`}
+        className={`${
+          (component.type === "component" && (component as any).componentType === "flow-widget") ||
+          ((component as any).componentType === "conditional-container" && !isDesignMode)
+            ? "h-auto"
+            : "h-full"
+        } overflow-visible`}
         style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
@@ -361,6 +376,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           sortBy={sortBy}
           sortOrder={sortOrder}
           columnOrder={columnOrder}
+          onHeightChange={onHeightChange}
         />
       </div>