fix: 분할패널 V2 설정에서 컬럼 선택 기능 복원

- 추가 탭에 PanelColumnSection 컬럼 선택 기능 추가
- 우측 패널 custom 모드에서도 컬럼 설정 표시되도록 조건 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kjs 2026-03-26 14:04:51 +09:00
parent 0a6922edeb
commit 07777e314b
1 changed files with 89 additions and 46 deletions

View File

@ -1507,53 +1507,51 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<V2SplitPanelLayoutConfigPan
</div>
{/* 우측 패널 컬럼 설정 (접이식) */}
{config.rightPanel?.displayMode !== "custom" && (
<Collapsible open={rightColumnsOpen} onOpenChange={setRightColumnsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="bg-muted/20 hover:bg-muted/40 flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors"
>
<div className="flex items-center gap-2">
<Columns3 className="text-muted-foreground h-3.5 w-3.5" />
<span className="text-xs font-medium">
({config.rightPanel?.columns?.length || 0})
</span>
</div>
<ChevronDown
className={cn(
"text-muted-foreground h-3.5 w-3.5 transition-transform duration-200",
rightColumnsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="mt-2 rounded-md border p-3">
{loadingColumns[rightTableName] ? (
<div className="text-muted-foreground flex items-center gap-2 py-4 text-xs">
<Loader2 className="h-3 w-3 animate-spin" />
...
</div>
) : rightTableColumns.length === 0 ? (
<p className="text-muted-foreground py-4 text-center text-xs">
</p>
) : (
<PanelColumnSection
panelKey="rightPanel"
columns={config.rightPanel?.columns}
availableColumns={rightTableColumns}
entityJoinData={rightEntityJoins}
loadingEntityJoins={loadingEntityJoins[rightTableName] || false}
tableName={rightTableName}
onColumnsChange={(columns) => updateRightPanel({ columns })}
/>
)}
<Collapsible open={rightColumnsOpen} onOpenChange={setRightColumnsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="bg-muted/20 hover:bg-muted/40 flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors"
>
<div className="flex items-center gap-2">
<Columns3 className="text-muted-foreground h-3.5 w-3.5" />
<span className="text-xs font-medium">
({config.rightPanel?.columns?.length || 0})
</span>
</div>
</CollapsibleContent>
</Collapsible>
)}
<ChevronDown
className={cn(
"text-muted-foreground h-3.5 w-3.5 transition-transform duration-200",
rightColumnsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="mt-2 rounded-md border p-3">
{loadingColumns[rightTableName] ? (
<div className="text-muted-foreground flex items-center gap-2 py-4 text-xs">
<Loader2 className="h-3 w-3 animate-spin" />
...
</div>
) : rightTableColumns.length === 0 ? (
<p className="text-muted-foreground py-4 text-center text-xs">
</p>
) : (
<PanelColumnSection
panelKey="rightPanel"
columns={config.rightPanel?.columns}
availableColumns={rightTableColumns}
entityJoinData={rightEntityJoins}
loadingEntityJoins={loadingEntityJoins[rightTableName] || false}
tableName={rightTableName}
onColumnsChange={(columns) => updateRightPanel({ columns })}
/>
)}
</div>
</CollapsibleContent>
</Collapsible>
{/* 우측 패널 데이터 필터 (접이식) */}
<Collapsible open={rightFilterOpen} onOpenChange={setRightFilterOpen}>
@ -2064,6 +2062,51 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<V2SplitPanelLayoutConfigPan
</div>
)}
{/* 탭 컬럼 설정 */}
{tab.tableName && (loadedTableColumns[tab.tableName] || []).length > 0 && (
<Collapsible defaultOpen>
<CollapsibleTrigger asChild>
<button
type="button"
className="bg-muted/20 hover:bg-muted/40 flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors"
>
<div className="flex items-center gap-2">
<Columns3 className="text-muted-foreground h-3.5 w-3.5" />
<span className="text-xs font-medium">
({tab.columns?.length || 0})
</span>
</div>
<ChevronDown className="text-muted-foreground h-3.5 w-3.5 transition-transform duration-200 [[data-state=open]>&]:rotate-180" />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="mt-2 rounded-md border p-3">
{loadingColumns[tab.tableName] ? (
<div className="text-muted-foreground flex items-center gap-2 py-4 text-xs">
<Loader2 className="h-3 w-3 animate-spin" />
...
</div>
) : (
<PanelColumnSection
panelKey="rightPanel"
columns={tab.columns}
availableColumns={loadedTableColumns[tab.tableName] || []}
entityJoinData={
entityJoinColumns[tab.tableName] || {
availableColumns: [],
joinTables: [],
}
}
loadingEntityJoins={loadingEntityJoins[tab.tableName] || false}
tableName={tab.tableName}
onColumnsChange={(columns) => updateTab(tabIndex, { columns })}
/>
)}
</div>
</CollapsibleContent>
</Collapsible>
)}
{/* 탭 기능 토글 */}
<div className="space-y-0.5">
<SwitchRow