feat(SplitPanelLayout2): 추가 조인 테이블 기능 구현
- JoinTableConfig 타입 정의 (joinTable, joinType, mainColumn, joinColumn, selectColumns) - RightPanelConfig.joinTables 배열 추가로 다중 조인 지원 - loadJoinTableData(), mergeJoinData() 함수로 클라이언트 사이드 조인 처리 - JoinTableItem 컴포넌트로 조인 테이블 설정 UI 제공 - 표시 컬럼에 sourceTable 추가로 테이블별 컬럼 구분 - 메인+조인 테이블 컬럼 통합 로드 기능
This commit is contained in:
SeongHyun Kim
@@ -28,7 +28,7 @@ import {
|
||||
import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField } from "./types";
|
||||
import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField, JoinTableConfig } from "./types";
|
||||
|
||||
// lodash set 대체 함수
|
||||
const setPath = (obj: any, path: string, value: any): any => {
|
||||
@@ -245,6 +245,68 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
}
|
||||
}, [config.rightPanel?.tableName, loadColumns]);
|
||||
|
||||
// 조인 테이블 컬럼도 우측 컬럼 목록에 추가
|
||||
useEffect(() => {
|
||||
const loadJoinTableColumns = async () => {
|
||||
const joinTables = config.rightPanel?.joinTables || [];
|
||||
if (joinTables.length === 0 || !config.rightPanel?.tableName) return;
|
||||
|
||||
// 메인 테이블 컬럼 먼저 로드
|
||||
try {
|
||||
const mainResponse = await apiClient.get(`/table-management/tables/${config.rightPanel.tableName}/columns?size=200`);
|
||||
let mainColumns: ColumnInfo[] = [];
|
||||
|
||||
if (mainResponse.data?.success) {
|
||||
const columnList = mainResponse.data.data?.columns || mainResponse.data.data || [];
|
||||
mainColumns = columnList.map((c: any) => ({
|
||||
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
||||
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
||||
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
||||
}));
|
||||
}
|
||||
|
||||
// 조인 테이블들의 선택된 컬럼 추가
|
||||
const joinColumns: ColumnInfo[] = [];
|
||||
for (const jt of joinTables) {
|
||||
if (jt.joinTable && jt.selectColumns && jt.selectColumns.length > 0) {
|
||||
try {
|
||||
const joinResponse = await apiClient.get(`/table-management/tables/${jt.joinTable}/columns?size=200`);
|
||||
if (joinResponse.data?.success) {
|
||||
const columnList = joinResponse.data.data?.columns || joinResponse.data.data || [];
|
||||
const transformedColumns = columnList.map((c: any) => ({
|
||||
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
||||
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
||||
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
||||
}));
|
||||
|
||||
// 선택된 컬럼 추가 (테이블명으로 구분)
|
||||
jt.selectColumns.forEach((selCol) => {
|
||||
const col = transformedColumns.find((c: ColumnInfo) => c.column_name === selCol);
|
||||
if (col) {
|
||||
joinColumns.push({
|
||||
...col,
|
||||
column_comment: col.column_comment ? `${col.column_comment} (${jt.joinTable})` : `${col.column_name} (${jt.joinTable})`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`조인 테이블 ${jt.joinTable} 컬럼 로드 실패:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 메인 + 조인 컬럼 합치기
|
||||
setRightColumns([...mainColumns, ...joinColumns]);
|
||||
console.log(`[loadJoinTableColumns] 우측 컬럼 로드 완료: 메인 ${mainColumns.length}개 + 조인 ${joinColumns.length}개`);
|
||||
} catch (error) {
|
||||
console.error("조인 테이블 컬럼 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadJoinTableColumns();
|
||||
}, [config.rightPanel?.tableName, config.rightPanel?.joinTables]);
|
||||
|
||||
// 테이블 선택 컴포넌트
|
||||
const TableSelect: React.FC<{
|
||||
value: string;
|
||||
@@ -388,13 +450,28 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder: string;
|
||||
}> = ({ columns, value, onValueChange, placeholder }) => {
|
||||
showTableName?: boolean; // 테이블명 표시 여부
|
||||
tableName?: string; // 메인 테이블명 (조인 컬럼과 구분용)
|
||||
}> = ({ columns, value, onValueChange, placeholder, showTableName = false, tableName }) => {
|
||||
// 현재 선택된 값의 라벨 찾기
|
||||
const selectedColumn = columns.find((col) => col.column_name === value);
|
||||
const displayValue = selectedColumn
|
||||
? selectedColumn.column_comment || selectedColumn.column_name
|
||||
: value || "";
|
||||
|
||||
// 컬럼이 조인 테이블에서 온 것인지 확인 (column_comment에 괄호가 있으면 조인 테이블)
|
||||
const isJoinColumn = (col: ColumnInfo) => col.column_comment?.includes("(") && col.column_comment?.includes(")");
|
||||
|
||||
// 컬럼 표시 텍스트 생성
|
||||
const getColumnDisplayText = (col: ColumnInfo) => {
|
||||
const label = col.column_comment || col.column_name;
|
||||
if (showTableName && tableName && !isJoinColumn(col)) {
|
||||
// 메인 테이블 컬럼에 테이블명 추가
|
||||
return `${label} (${tableName})`;
|
||||
}
|
||||
return label;
|
||||
};
|
||||
|
||||
return (
|
||||
<Select value={value || ""} onValueChange={onValueChange}>
|
||||
<SelectTrigger className="h-9 text-sm min-w-[120px]">
|
||||
@@ -410,7 +487,16 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
) : (
|
||||
columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_comment || col.column_name}
|
||||
<span className="flex flex-col">
|
||||
<span>{col.column_comment || col.column_name}</span>
|
||||
{showTableName && (
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{isJoinColumn(col)
|
||||
? col.column_name
|
||||
: `${col.column_name} (${tableName || "메인"})`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
@@ -419,6 +505,222 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
);
|
||||
};
|
||||
|
||||
// 조인 테이블 아이템 컴포넌트
|
||||
const JoinTableItem: React.FC<{
|
||||
index: number;
|
||||
joinTable: JoinTableConfig;
|
||||
tables: TableInfo[];
|
||||
mainTableColumns: ColumnInfo[];
|
||||
onUpdate: (field: keyof JoinTableConfig | Partial<JoinTableConfig>, value?: any) => void;
|
||||
onRemove: () => void;
|
||||
}> = ({ index, joinTable, tables, mainTableColumns, onUpdate, onRemove }) => {
|
||||
const [joinTableColumns, setJoinTableColumns] = useState<ColumnInfo[]>([]);
|
||||
const [joinTableOpen, setJoinTableOpen] = useState(false);
|
||||
|
||||
// 조인 테이블 선택 시 해당 테이블의 컬럼 로드
|
||||
useEffect(() => {
|
||||
const loadJoinTableColumns = async () => {
|
||||
if (!joinTable.joinTable) {
|
||||
setJoinTableColumns([]);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${joinTable.joinTable}/columns?size=200`);
|
||||
let columnList: any[] = [];
|
||||
if (response.data?.success && response.data?.data?.columns) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data?.columns)) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data)) {
|
||||
columnList = response.data.data;
|
||||
}
|
||||
|
||||
const transformedColumns = columnList.map((c: any) => ({
|
||||
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
||||
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
||||
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
||||
}));
|
||||
setJoinTableColumns(transformedColumns);
|
||||
} catch (error) {
|
||||
console.error("조인 테이블 컬럼 로드 실패:", error);
|
||||
setJoinTableColumns([]);
|
||||
}
|
||||
};
|
||||
loadJoinTableColumns();
|
||||
}, [joinTable.joinTable]);
|
||||
|
||||
const selectedTable = tables.find((t) => t.table_name === joinTable.joinTable);
|
||||
|
||||
return (
|
||||
<div className="rounded-md border p-3 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">조인 {index + 1}</span>
|
||||
<Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={onRemove}>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 조인 테이블 선택 */}
|
||||
<div>
|
||||
<Label className="text-xs">조인할 테이블</Label>
|
||||
<Popover open={joinTableOpen} onOpenChange={setJoinTableOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={joinTableOpen}
|
||||
className="h-8 w-full justify-between text-xs"
|
||||
>
|
||||
{selectedTable
|
||||
? selectedTable.table_comment || selectedTable.table_name
|
||||
: joinTable.joinTable || "테이블 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty>검색 결과가 없습니다</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((table) => (
|
||||
<CommandItem
|
||||
key={table.table_name}
|
||||
value={`${table.table_name} ${table.table_comment || ""}`}
|
||||
onSelect={() => {
|
||||
// cmdk가 value를 소문자로 변환하므로 직접 table.table_name 사용
|
||||
// 여러 필드를 한 번에 업데이트 (연속 호출 시 덮어쓰기 방지)
|
||||
onUpdate({
|
||||
joinTable: table.table_name,
|
||||
selectColumns: [], // 테이블 변경 시 선택 컬럼 초기화
|
||||
});
|
||||
setJoinTableOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
joinTable.joinTable === table.table_name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="flex flex-col">
|
||||
<span>{table.table_comment || table.table_name}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{table.table_name}</span>
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 조인 타입 */}
|
||||
<div>
|
||||
<Label className="text-xs">조인 방식</Label>
|
||||
<Select
|
||||
value={joinTable.joinType || "LEFT"}
|
||||
onValueChange={(value) => onUpdate("joinType", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="LEFT">LEFT JOIN (데이터 없어도 표시)</SelectItem>
|
||||
<SelectItem value="INNER">INNER JOIN (데이터 있어야만 표시)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 조인 조건 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">조인 조건</Label>
|
||||
<div className="rounded-md bg-muted/30 p-2 space-y-2">
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">메인 테이블 컬럼</Label>
|
||||
<ColumnSelect
|
||||
columns={mainTableColumns}
|
||||
value={joinTable.mainColumn || ""}
|
||||
onValueChange={(value) => onUpdate("mainColumn", value)}
|
||||
placeholder="메인 테이블 컬럼"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center text-[10px] text-muted-foreground">=</div>
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">조인 테이블 컬럼</Label>
|
||||
<ColumnSelect
|
||||
columns={joinTableColumns}
|
||||
value={joinTable.joinColumn || ""}
|
||||
onValueChange={(value) => onUpdate("joinColumn", value)}
|
||||
placeholder="조인 테이블 컬럼"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 가져올 컬럼 선택 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<Label className="text-xs">가져올 컬럼</Label>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-5 text-[10px] px-1"
|
||||
onClick={() => {
|
||||
const current = joinTable.selectColumns || [];
|
||||
onUpdate("selectColumns", [...current, ""]);
|
||||
}}
|
||||
disabled={!joinTable.joinTable}
|
||||
>
|
||||
<Plus className="mr-0.5 h-2.5 w-2.5" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground mb-2">
|
||||
조인 테이블에서 표시할 컬럼들을 선택하세요
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{(joinTable.selectColumns || []).map((col, colIndex) => (
|
||||
<div key={colIndex} className="flex items-center gap-1">
|
||||
<ColumnSelect
|
||||
columns={joinTableColumns}
|
||||
value={col}
|
||||
onValueChange={(value) => {
|
||||
const current = [...(joinTable.selectColumns || [])];
|
||||
current[colIndex] = value;
|
||||
onUpdate("selectColumns", current);
|
||||
}}
|
||||
placeholder="컬럼 선택"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 shrink-0 p-0"
|
||||
onClick={() => {
|
||||
const current = joinTable.selectColumns || [];
|
||||
onUpdate(
|
||||
"selectColumns",
|
||||
current.filter((_, i) => i !== colIndex)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{(joinTable.selectColumns || []).length === 0 && (
|
||||
<div className="rounded border py-2 text-center text-[10px] text-muted-foreground">
|
||||
가져올 컬럼을 추가하세요
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 표시 컬럼 추가
|
||||
const addDisplayColumn = (side: "left" | "right") => {
|
||||
const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
|
||||
@@ -440,14 +742,25 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
};
|
||||
|
||||
// 표시 컬럼 업데이트
|
||||
const updateDisplayColumn = (side: "left" | "right", index: number, field: keyof ColumnConfig, value: any) => {
|
||||
const updateDisplayColumn = (
|
||||
side: "left" | "right",
|
||||
index: number,
|
||||
fieldOrPartial: keyof ColumnConfig | Partial<ColumnConfig>,
|
||||
value?: any
|
||||
) => {
|
||||
const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
|
||||
const currentColumns = side === "left"
|
||||
? [...(config.leftPanel?.displayColumns || [])]
|
||||
: [...(config.rightPanel?.displayColumns || [])];
|
||||
|
||||
if (currentColumns[index]) {
|
||||
currentColumns[index] = { ...currentColumns[index], [field]: value };
|
||||
if (typeof fieldOrPartial === "object") {
|
||||
// 여러 필드를 한 번에 업데이트
|
||||
currentColumns[index] = { ...currentColumns[index], ...fieldOrPartial };
|
||||
} else {
|
||||
// 단일 필드 업데이트
|
||||
currentColumns[index] = { ...currentColumns[index], [fieldOrPartial]: value };
|
||||
}
|
||||
updateConfig(path, currentColumns);
|
||||
}
|
||||
};
|
||||
@@ -687,6 +1000,66 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 추가 조인 테이블 설정 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">추가 조인 테이블</Label>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 text-xs"
|
||||
onClick={() => {
|
||||
const current = config.rightPanel?.joinTables || [];
|
||||
updateConfig("rightPanel.joinTables", [
|
||||
...current,
|
||||
{
|
||||
joinTable: "",
|
||||
joinType: "LEFT",
|
||||
mainColumn: "",
|
||||
joinColumn: "",
|
||||
selectColumns: [],
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
다른 테이블을 조인하면 표시할 컬럼에서 해당 테이블의 컬럼도 선택할 수 있습니다.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{(config.rightPanel?.joinTables || []).map((joinTable, index) => (
|
||||
<JoinTableItem
|
||||
key={index}
|
||||
index={index}
|
||||
joinTable={joinTable}
|
||||
tables={tables}
|
||||
mainTableColumns={rightColumns}
|
||||
onUpdate={(fieldOrPartial, value) => {
|
||||
const current = [...(config.rightPanel?.joinTables || [])];
|
||||
if (typeof fieldOrPartial === "object") {
|
||||
// 여러 필드를 한 번에 업데이트
|
||||
current[index] = { ...current[index], ...fieldOrPartial };
|
||||
} else {
|
||||
// 단일 필드 업데이트
|
||||
current[index] = { ...current[index], [fieldOrPartial]: value };
|
||||
}
|
||||
updateConfig("rightPanel.joinTables", current);
|
||||
}}
|
||||
onRemove={() => {
|
||||
const current = config.rightPanel?.joinTables || [];
|
||||
updateConfig(
|
||||
"rightPanel.joinTables",
|
||||
current.filter((_, i) => i !== index)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 표시 컬럼 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
@@ -696,52 +1069,144 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground mb-2">
|
||||
테이블을 선택한 후 해당 테이블의 컬럼을 선택하세요.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{(config.rightPanel?.displayColumns || []).map((col, index) => (
|
||||
<div key={index} className="rounded-md border p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => removeDisplayColumn("right", index)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
{(config.rightPanel?.displayColumns || []).map((col, index) => {
|
||||
// 선택 가능한 테이블 목록: 메인 테이블 + 조인 테이블들
|
||||
const availableTables = [
|
||||
config.rightPanel?.tableName,
|
||||
...(config.rightPanel?.joinTables || []).map((jt) => jt.joinTable),
|
||||
].filter(Boolean) as string[];
|
||||
|
||||
// 선택된 테이블의 컬럼만 필터링
|
||||
const selectedSourceTable = col.sourceTable || config.rightPanel?.tableName;
|
||||
const filteredColumns = rightColumns.filter((c) => {
|
||||
// 조인 테이블 컬럼인지 확인 (column_comment에 테이블명 포함)
|
||||
const isJoinColumn = c.column_comment?.includes("(") && c.column_comment?.includes(")");
|
||||
|
||||
if (selectedSourceTable === config.rightPanel?.tableName) {
|
||||
// 메인 테이블 선택 시: 조인 컬럼 아닌 것만
|
||||
return !isJoinColumn;
|
||||
} else {
|
||||
// 조인 테이블 선택 시: 해당 테이블 컬럼만
|
||||
return c.column_comment?.includes(`(${selectedSourceTable})`);
|
||||
}
|
||||
});
|
||||
|
||||
// 테이블 라벨 가져오기
|
||||
const getTableLabel = (tableName: string) => {
|
||||
const table = tables.find((t) => t.table_name === tableName);
|
||||
return table?.table_comment || tableName;
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={index} className="rounded-md border p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => removeDisplayColumn("right", index)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 테이블 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">테이블</Label>
|
||||
<Select
|
||||
value={col.sourceTable || config.rightPanel?.tableName || ""}
|
||||
onValueChange={(value) => {
|
||||
// 테이블 변경 시 sourceTable과 name을 한 번에 업데이트
|
||||
updateDisplayColumn("right", index, {
|
||||
sourceTable: value,
|
||||
name: "", // 컬럼 초기화
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableTables.map((tableName) => (
|
||||
<SelectItem key={tableName} value={tableName}>
|
||||
<span className="flex flex-col">
|
||||
<span>{getTableLabel(tableName)}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{tableName}</span>
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">컬럼</Label>
|
||||
<Select
|
||||
value={col.name || ""}
|
||||
onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredColumns.length === 0 ? (
|
||||
<SelectItem value="_empty" disabled>
|
||||
테이블을 먼저 선택하세요
|
||||
</SelectItem>
|
||||
) : (
|
||||
filteredColumns.map((c) => {
|
||||
// 조인 컬럼의 경우 테이블명 제거하고 표시
|
||||
const displayLabel = c.column_comment?.replace(/\s*\([^)]+\)$/, "") || c.column_name;
|
||||
return (
|
||||
<SelectItem key={c.column_name} value={c.column_name}>
|
||||
<span className="flex flex-col">
|
||||
<span>{displayLabel}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{c.column_name}</span>
|
||||
</span>
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 표시 라벨 */}
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
|
||||
<Input
|
||||
value={col.label || ""}
|
||||
onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
|
||||
placeholder="라벨명 (미입력 시 컬럼명 사용)"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 표시 위치 */}
|
||||
<div>
|
||||
<Label className="text-[10px] text-muted-foreground">표시 위치</Label>
|
||||
<Select
|
||||
value={col.displayRow || "info"}
|
||||
onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
|
||||
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<ColumnSelect
|
||||
columns={rightColumns}
|
||||
value={col.name}
|
||||
onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
|
||||
placeholder="컬럼 선택"
|
||||
/>
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground">표시 라벨</Label>
|
||||
<Input
|
||||
value={col.label || ""}
|
||||
onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
|
||||
placeholder="라벨명 (미입력 시 컬럼명 사용)"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground">표시 위치</Label>
|
||||
<Select
|
||||
value={col.displayRow || "info"}
|
||||
onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
|
||||
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
{(config.rightPanel?.displayColumns || []).length === 0 && (
|
||||
<div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
|
||||
표시할 컬럼을 추가하세요
|
||||
|
||||
Reference in New Issue
Block a user