분할패널 상단헤더 크기 조정기능

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

@@ -2030,8 +2030,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="border-border flex flex-shrink-0 flex-col border-r"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
-          <CardHeader className="border-b pb-3">
+          <CardHeader 
-            <div className="flex items-center justify-between">
+            className="flex-shrink-0 border-b"
+            style={{ 
+              height: componentConfig.leftPanel?.panelHeaderHeight || 48,
+              minHeight: componentConfig.leftPanel?.panelHeaderHeight || 48,
+              padding: '0 1rem',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
                 {componentConfig.leftPanel?.title || "좌측 패널"}
               </CardTitle>
@@ -2042,8 +2051,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 </Button>
               )}
             </div>
-            {componentConfig.leftPanel?.showSearch && (
+          </CardHeader>
-              <div className="relative mt-2">
+          {componentConfig.leftPanel?.showSearch && (
+            <div className="flex-shrink-0 border-b p-2">
+              <div className="relative">
                 <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
@@ -2052,8 +2063,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   className="pl-9"
                 />
               </div>
-            )}
+            </div>
-          </CardHeader>
+          )}
           <CardContent className="flex-1 overflow-auto p-4">
             {/* 좌측 데이터 목록/테이블 */}
             {componentConfig.leftPanel?.displayMode === "table" ? (
@@ -2510,8 +2521,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="flex flex-shrink-0 flex-col"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
-          <CardHeader className="border-b pb-3">
+          <CardHeader 
-            <div className="flex items-center justify-between">
+            className="flex-shrink-0 border-b"
+            style={{ 
+              height: componentConfig.rightPanel?.panelHeaderHeight || 48,
+              minHeight: componentConfig.rightPanel?.panelHeaderHeight || 48,
+              padding: '0 1rem',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
                 {componentConfig.rightPanel?.title || "우측 패널"}
               </CardTitle>
@@ -2527,8 +2547,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 </div>
               )}
             </div>
-            {componentConfig.rightPanel?.showSearch && (
+          </CardHeader>
-              <div className="relative mt-2">
+          {componentConfig.rightPanel?.showSearch && (
+            <div className="flex-shrink-0 border-b p-2">
+              <div className="relative">
                 <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
@@ -2537,8 +2559,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   className="pl-9"
                 />
               </div>
-            )}
+            </div>
-          </CardHeader>
+          )}
           <CardContent className="flex-1 overflow-auto p-4">
             {/* 우측 데이터 */}
             {isLoadingRight ? (

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

@@ -602,6 +602,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           />
         </div>
 
+        <div className="space-y-2">
+          <Label>헤더 높이 (px)</Label>
+          <Input
+            type="number"
+            value={config.leftPanel?.panelHeaderHeight || 48}
+            onChange={(e) => updateLeftPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
+            placeholder="48"
+            min={32}
+            max={120}
+          />
+          <p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
+        </div>
+
         <div className="space-y-2">
           <Label>테이블 (현재 화면 고정)</Label>
           <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
@@ -1486,6 +1499,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           />
         </div>
 
+        <div className="space-y-2">
+          <Label>헤더 높이 (px)</Label>
+          <Input
+            type="number"
+            value={config.rightPanel?.panelHeaderHeight || 48}
+            onChange={(e) => updateRightPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
+            placeholder="48"
+            min={32}
+            max={120}
+          />
+          <p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
+        </div>
+
         {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
         {relationshipType === "detail" ? (
           // 상세 모드: 좌측과 동일한 테이블 (자동 설정)

frontend/lib/registry/components/split-panel-layout/types.ts

@@ -8,6 +8,7 @@ export interface SplitPanelLayoutConfig {
   // 좌측 패널 설정
   leftPanel: {
     title: string;
+    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string; // 데이터베이스 테이블명
     dataSource?: string; // API 엔드포인트
     displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
@@ -70,6 +71,7 @@ export interface SplitPanelLayoutConfig {
   // 우측 패널 설정
   rightPanel: {
     title: string;
+    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string;
     dataSource?: string;
     displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블