From 73cc969bd802940fbbe411a1f186386aa293938e Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 23 Dec 2025 09:37:40 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B6=84=ED=95=A0=ED=8C=A8=EB=84=90=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=ED=97=A4=EB=8D=94=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SplitPanelLayoutComponent.tsx             | 46 ++++++++++++++-----
 .../SplitPanelLayoutConfigPanel.tsx           | 26 +++++++++++
 .../components/split-panel-layout/types.ts    |  2 +
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index 2bfdda74..ef91a23d 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/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">
-            <div className="flex items-center justify-between">
+          <CardHeader 
+            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 && (
-              <div className="relative mt-2">
+          </CardHeader>
+          {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>
-            )}
-          </CardHeader>
+            </div>
+          )}
           <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">
-            <div className="flex items-center justify-between">
+          <CardHeader 
+            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 && (
-              <div className="relative mt-2">
+          </CardHeader>
+          {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>
-            )}
-          </CardHeader>
+            </div>
+          )}
           <CardContent className="flex-1 overflow-auto p-4">
             {/* 우측 데이터 */}
             {isLoadingRight ? (
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index 203e1e47..5ca50ffb 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/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" ? (
           // 상세 모드: 좌측과 동일한 테이블 (자동 설정)
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
index 3fdc3792..0e9d6db9 100644
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/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"; // 표시 모드: 목록 또는 테이블