chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

우측 패널 조절 가능하도록 수정

Browse Source
This commit is contained in:
dohyeons
2025-11-07 12:00:46 +09:00
parent 25740c499d
commit 7835898a09
2 changed files with 181 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -534,12 +534,46 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{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 (
<div
@@ -611,21 +645,39 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
})()
) : (
// 상세 모드: 단일 객체를 상세 정보로 표시
<div className="space-y-2">
{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 (
<div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
<div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
{key}
</div>
<div className="text-sm">{String(value)}</div>
</div>
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 !== ""
);
})}
</div>
console.log(" ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
}
return (
<div className="space-y-2">
{displayEntries.map(([key, value]) => (
<div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
<div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
{getColumnLabel(key)}
</div>
<div className="text-sm">{String(value)}</div>
</div>
))}
</div>
);
})()
)
) : selectedLeftItem && isDesignMode ? (
// 디자인 모드: 샘플 데이터