조건부 컨테이너

frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -34,6 +34,8 @@ export function ConditionalContainerComponent({
   onDeleteComponent,
   onSelectComponent,
   selectedComponentId,
+  onHeightChange,
+  componentId,
   style,
   className,
 }: ConditionalContainerProps) {
@@ -70,6 +72,33 @@ export function ConditionalContainerComponent({
     }
   };
 
+  // 컨테이너 높이 측정용 ref
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousHeightRef = useRef<number>(0);
+
+  // 높이 변화 감지 및 콜백 호출
+  useEffect(() => {
+    if (!containerRef.current || isDesignMode || !onHeightChange) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newHeight = entry.contentRect.height;
+        
+        // 높이가 실제로 변경되었을 때만 콜백 호출
+        if (Math.abs(newHeight - previousHeightRef.current) > 5) {
+          console.log(`📏 조건부 컨테이너 높이 변화: ${previousHeightRef.current}px → ${newHeight}px`);
+          previousHeightRef.current = newHeight;
+          onHeightChange(newHeight);
+        }
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isDesignMode, onHeightChange, selectedValue]); // selectedValue 변경 시에도 감지
 
   // 간격 스타일
   const spacingClass = {
@@ -80,6 +109,7 @@ export function ConditionalContainerComponent({
 
   return (
     <div
+      ref={containerRef}
       className={cn("h-full w-full flex flex-col", spacingClass, className)}
       style={style}
     >
@@ -106,7 +136,7 @@ export function ConditionalContainerComponent({
       </div>
 
       {/* 조건별 섹션들 */}
-      <div className="flex-1 min-h-0 overflow-auto">
+      <div className="flex-1 min-h-0">
         {isDesignMode ? (
           // 디자인 모드: 모든 섹션 표시
           <div className={spacingClass}>