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

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

@@ -13,6 +13,8 @@ import { ConditionalContainerProps, ConditionalSection } from "./types";
 import { ConditionalSectionViewer } from "./ConditionalSectionViewer";
 import { cn } from "@/lib/utils";
 
+console.log("🚀 ConditionalContainerComponent 모듈 로드됨!");
+
 /**
  * 조건부 컨테이너 컴포넌트
  * 상단 셀렉트박스 값에 따라 하단에 다른 UI를 표시
@@ -39,6 +41,12 @@ export function ConditionalContainerComponent({
   style,
   className,
 }: ConditionalContainerProps) {
+  console.log("🎯 ConditionalContainerComponent 렌더링!", {
+    isDesignMode,
+    hasOnHeightChange: !!onHeightChange,
+    componentId,
+  });
+  
   // config prop 우선, 없으면 개별 prop 사용
   const controlField = config?.controlField || propControlField || "condition";
   const controlLabel = config?.controlLabel || propControlLabel || "조건 선택";
@@ -76,8 +84,24 @@ export function ConditionalContainerComponent({
   const containerRef = useRef<HTMLDivElement>(null);
   const previousHeightRef = useRef<number>(0);
 
+  // 🔍 디버그: props 확인
+  useEffect(() => {
+    console.log("🔍 ConditionalContainer props:", {
+      isDesignMode,
+      hasOnHeightChange: !!onHeightChange,
+      componentId,
+      selectedValue,
+    });
+  }, [isDesignMode, onHeightChange, componentId, selectedValue]);
+
   // 높이 변화 감지 및 콜백 호출
   useEffect(() => {
+    console.log("🔍 ResizeObserver 등록 조건:", {
+      hasContainer: !!containerRef.current,
+      isDesignMode,
+      hasOnHeightChange: !!onHeightChange,
+    });
+    
     if (!containerRef.current || isDesignMode || !onHeightChange) return;
 
     const resizeObserver = new ResizeObserver((entries) => {
@@ -110,7 +134,7 @@ export function ConditionalContainerComponent({
   return (
     <div
       ref={containerRef}
-      className={cn("h-full w-full flex flex-col", spacingClass, className)}
+      className={cn("w-full flex flex-col", spacingClass, className)}
       style={style}
     >
       {/* 제어 셀렉트박스 */}