분할 패널 높이 조정 수정

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 ? (
               // 로딩 중