우측 패널 조절 가능하도록 수정
This commit is contained in:
dohyeons
parent
25740c499d
commit
7835898a09
|
|
@ -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 ? (
|
||||
// 디자인 모드: 샘플 데이터
|
||||
|
|
|
|||
|
|
@ -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<SplitPanelLayoutConfigPanelPr
|
|||
onCheckedChange={(checked) => updateRightPanel({ showAdd: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 우측 패널 표시 컬럼 설정 */}
|
||||
<div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-semibold">표시할 컬럼 선택</Label>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const currentColumns = config.rightPanel?.columns || [];
|
||||
const newColumns = [
|
||||
...currentColumns,
|
||||
{ name: "", label: "", width: 100 },
|
||||
];
|
||||
updateRightPanel({ columns: newColumns });
|
||||
}}
|
||||
className="h-7 text-xs"
|
||||
disabled={!config.rightPanel?.tableName}
|
||||
>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
컬럼 추가
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600">
|
||||
우측 패널에 표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
|
||||
</p>
|
||||
|
||||
{/* 선택된 컬럼 목록 */}
|
||||
<div className="space-y-2">
|
||||
{(config.rightPanel?.columns || []).length === 0 ? (
|
||||
<div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
|
||||
<p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
|
||||
<p className="mt-1 text-[10px] text-gray-400">
|
||||
컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
(config.rightPanel?.columns || []).map((col, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 rounded-md border bg-white p-2"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="h-8 w-full justify-between text-xs"
|
||||
>
|
||||
{col.name || "컬럼 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||||
<CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup className="max-h-[200px] overflow-auto">
|
||||
{rightTableColumns.map((column) => (
|
||||
<CommandItem
|
||||
key={column.columnName}
|
||||
value={column.columnName}
|
||||
onSelect={(value) => {
|
||||
const newColumns = [...(config.rightPanel?.columns || [])];
|
||||
newColumns[index] = {
|
||||
...newColumns[index],
|
||||
name: value,
|
||||
label: column.columnLabel || value,
|
||||
};
|
||||
updateRightPanel({ columns: newColumns });
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
col.name === column.columnName ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{column.columnLabel || column.columnName}
|
||||
<span className="ml-2 text-[10px] text-gray-500">
|
||||
({column.columnName})
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
const newColumns = (config.rightPanel?.columns || []).filter(
|
||||
(_, i) => i !== index
|
||||
);
|
||||
updateRightPanel({ columns: newColumns });
|
||||
}}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 레이아웃 설정 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue