kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
kjs 2025-12-23 09:37:40 +09:00
parent 5f406fbe88
commit 73cc969bd8
3 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 ? (

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

@ -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" ? (
// 상세 모드: 좌측과 동일한 테이블 (자동 설정)

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

@ -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"; // 표시 모드: 목록 또는 테이블