diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx index 0d6dfbd9..670900d5 100644 --- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx @@ -534,12 +534,46 @@ export const SplitPanelLayoutComponent: React.FC {filteredData.map((item, index) => { const itemId = item.id || item.ID || index; const isExpanded = expandedRightItems.has(itemId); - const firstValues = Object.entries(item) - .filter(([key]) => !key.toLowerCase().includes("id")) - .slice(0, 3); - const allValues = Object.entries(item).filter( - ([key, value]) => value !== null && value !== undefined && value !== "", - ); + + // 우측 패널 표시 컬럼 설정 확인 + const rightColumns = componentConfig.rightPanel?.columns; + let firstValues: [string, any][] = []; + let allValues: [string, any][] = []; + + if (index === 0) { + console.log("🔍 우측 패널 표시 로직:"); + console.log(" - rightColumns:", rightColumns); + console.log(" - item keys:", Object.keys(item)); + } + + if (rightColumns && rightColumns.length > 0) { + // 설정된 컬럼만 표시 + firstValues = rightColumns + .slice(0, 3) + .map((col) => [col.name, item[col.name]] as [string, any]) + .filter(([_, value]) => value !== null && value !== undefined && value !== ""); + + allValues = rightColumns + .map((col) => [col.name, item[col.name]] as [string, any]) + .filter(([_, value]) => value !== null && value !== undefined && value !== ""); + + if (index === 0) { + console.log(" ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name)); + } + } else { + // 설정 없으면 모든 컬럼 표시 (기존 로직) + firstValues = Object.entries(item) + .filter(([key]) => !key.toLowerCase().includes("id")) + .slice(0, 3); + + allValues = Object.entries(item).filter( + ([key, value]) => value !== null && value !== undefined && value !== "", + ); + + if (index === 0) { + console.log(" ⚠️ 컬럼 설정 없음, 모든 컬럼 표시"); + } + } return (
})() ) : ( // 상세 모드: 단일 객체를 상세 정보로 표시 -
- {Object.entries(rightData).map(([key, value]) => { - // null, undefined, 빈 문자열 제외 - if (value === null || value === undefined || value === "") return null; + (() => { + const rightColumns = componentConfig.rightPanel?.columns; + let displayEntries: [string, any][] = []; - return ( -
-
- {key} -
-
{String(value)}
-
+ if (rightColumns && rightColumns.length > 0) { + // 설정된 컬럼만 표시 + displayEntries = rightColumns + .map((col) => [col.name, rightData[col.name]] as [string, any]) + .filter(([_, value]) => value !== null && value !== undefined && value !== ""); + + console.log("🔍 상세 모드 표시 로직:"); + console.log(" ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name)); + } else { + // 설정 없으면 모든 컬럼 표시 + displayEntries = Object.entries(rightData).filter( + ([_, value]) => value !== null && value !== undefined && value !== "" ); - })} -
+ console.log(" ⚠️ 컬럼 설정 없음, 모든 컬럼 표시"); + } + + return ( +
+ {displayEntries.map(([key, value]) => ( +
+
+ {getColumnLabel(key)} +
+
{String(value)}
+
+ ))} +
+ ); + })() ) ) : selectedLeftItem && isDesignMode ? ( // 디자인 모드: 샘플 데이터 diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx index 0575efed..320d3063 100644 --- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx +++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx @@ -9,7 +9,7 @@ import { Slider } from "@/components/ui/slider"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Button } from "@/components/ui/button"; -import { Check, ChevronsUpDown, ArrowRight } from "lucide-react"; +import { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { SplitPanelLayoutConfig } from "./types"; import { TableInfo, ColumnInfo } from "@/types/screen"; @@ -468,6 +468,115 @@ export const SplitPanelLayoutConfigPanel: React.FC updateRightPanel({ showAdd: checked })} />
+ + {/* 우측 패널 표시 컬럼 설정 */} +
+
+ + +
+

+ 우측 패널에 표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다. +

+ + {/* 선택된 컬럼 목록 */} +
+ {(config.rightPanel?.columns || []).length === 0 ? ( +
+

설정된 컬럼이 없습니다

+

+ 컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다 +

+
+ ) : ( + (config.rightPanel?.columns || []).map((col, index) => ( +
+
+ + + + + + + + 컬럼을 찾을 수 없습니다. + + {rightTableColumns.map((column) => ( + { + const newColumns = [...(config.rightPanel?.columns || [])]; + newColumns[index] = { + ...newColumns[index], + name: value, + label: column.columnLabel || value, + }; + updateRightPanel({ columns: newColumns }); + }} + className="text-xs" + > + + {column.columnLabel || column.columnName} + + ({column.columnName}) + + + ))} + + + + +
+ +
+ )) + )} +
+
{/* 레이아웃 설정 */}