분할 패널 높이 조정 수정

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -291,6 +291,19 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     return "40px";
   };
 
+  // layout 타입 컴포넌트인지 확인
+  const isLayoutComponent = component.type === "layout" || 
+    (component.componentConfig as any)?.type?.includes("layout");
+  
+  // layout 컴포넌트는 component 객체에 style.height 추가
+  const enhancedComponent = isLayoutComponent ? {
+    ...component,
+    style: {
+      ...component.style,
+      height: getHeight(),
+    }
+  } : component;
+
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
@@ -384,7 +397,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
-          component={component}
+          component={enhancedComponent}
           isSelected={isSelected}
           isDesignMode={isDesignMode}
           isInteractive={!isDesignMode} // 편집 모드가 아닐 때만 인터랙티브

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -243,6 +243,20 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 렌더러 props 구성
         // component.style에서 height 제거 (RealtimePreviewDynamic에서 size.height로 처리)
+        // 단, layout 타입 컴포넌트(split-panel-layout 등)는 height 유지
+        const isLayoutComponent = 
+          component.type === "layout" || 
+          componentType === "split-panel-layout" ||
+          componentType?.includes("layout");
+        
+        console.log("🔍 [DynamicComponentRenderer] 높이 처리:", {
+          componentId: component.id,
+          componentType,
+          isLayoutComponent,
+          hasHeight: !!component.style?.height,
+          height: component.style?.height
+        });
+        
         const { height: _height, ...styleWithoutHeight } = component.style || {};
 
         // 숨김 값 추출
@@ -256,7 +270,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onDragEnd,
           size: component.size || newComponent.defaultSize,
           position: component.position,
-          style: styleWithoutHeight,
+          style: isLayoutComponent ? component.style : styleWithoutHeight, // 레이아웃은 height 유지
           config: component.componentConfig,
           componentConfig: component.componentConfig,
           value: currentValue, // formData에서 추출한 현재 값 전달

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -53,12 +53,20 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   // 컴포넌트 스타일
+  // height 처리: 이미 px 단위면 그대로, 숫자면 px 추가
+  const getHeightValue = () => {
+    const height = component.style?.height;
+    if (!height) return "600px";
+    if (typeof height === "string") return height; // 이미 '540px' 형태
+    return `${height}px`; // 숫자면 px 추가
+  };
+
   const componentStyle: React.CSSProperties = isPreview
     ? {
         // 반응형 모드: position relative, 그리드 컨테이너가 제공하는 크기 사용
         position: "relative",
         width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
-        height: `${component.style?.height || 600}px`,
+        height: getHeightValue(),
         border: "1px solid #e5e7eb",
       }
     : {
@@ -67,7 +75,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         left: `${component.style?.positionX || 0}px`,
         top: `${component.style?.positionY || 0}px`,
         width: "100%", // 🆕 부모 컨테이너 너비에 맞춤 (그리드 기반)
-        height: `${component.style?.height || 600}px`,
+        height: getHeightValue(),
         zIndex: component.style?.positionZ || 1,
         cursor: isDesignMode ? "pointer" : "default",
         border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
@@ -257,29 +265,31 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   return (
     <div
       ref={containerRef}
-      style={
-        isPreview
+      style={{
+        ...(isPreview
           ? {
               position: "relative",
               height: `${component.style?.height || 600}px`,
               border: "1px solid #e5e7eb",
             }
-          : componentStyle
-      }
+          : componentStyle),
+        display: "flex",
+        flexDirection: "row",
+      }}
       onClick={(e) => {
         if (isDesignMode) {
           e.stopPropagation();
           onClick?.(e);
         }
       }}
-      className="flex w-full overflow-hidden rounded-lg bg-white shadow-sm"
+      className="w-full overflow-hidden rounded-lg bg-white shadow-sm"
     >
       {/* 좌측 패널 */}
       <div
-        style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px` }}
+        style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px`, height: "100%" }}
         className="border-border flex flex-shrink-0 flex-col border-r"
       >
-        <Card className="flex h-full flex-col border-0 shadow-none">
+        <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
           <CardHeader className="border-b pb-3">
             <div className="flex items-center justify-between">
               <CardTitle className="text-base font-semibold">
@@ -304,9 +314,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               </div>
             )}
           </CardHeader>
-          <CardContent className="flex-1 overflow-auto">
+          <CardContent className="flex-1 overflow-auto p-4">
             {/* 좌측 데이터 목록 */}
-            <div className="space-y-1 px-2">
+            <div className="space-y-1">
               {isDesignMode ? (
                 // 디자인 모드: 샘플 데이터
                 <>
@@ -413,10 +423,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
       {/* 우측 패널 */}
       <div
-        style={{ width: `${100 - leftWidth}%`, minWidth: isPreview ? "0" : `${minRightWidth}px` }}
+        style={{ width: `${100 - leftWidth}%`, minWidth: isPreview ? "0" : `${minRightWidth}px`, height: "100%" }}
         className="flex flex-shrink-0 flex-col"
       >
-        <Card className="flex h-full flex-col border-0 shadow-none">
+        <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
           <CardHeader className="border-b pb-3">
             <div className="flex items-center justify-between">
               <CardTitle className="text-base font-semibold">
@@ -441,7 +451,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               </div>
             )}
           </CardHeader>
-          <CardContent className="flex-1 overflow-auto">
+          <CardContent className="flex-1 overflow-auto p-4">
             {/* 우측 데이터 */}
             {isLoadingRight ? (
               // 로딩 중