[agent-pipeline] pipe-20260317084014-ydap round-1
This commit is contained in:
DDD1542
@@ -78,7 +78,16 @@ export function ColumnDetailPanel({
|
||||
|
||||
const refTableOpts = referenceTableOptions.length
|
||||
? referenceTableOptions
|
||||
: [{ value: "none", label: "선택 안함" }, ...tables.map((t) => ({ value: t.tableName, label: t.displayName || t.tableName }))];
|
||||
: [
|
||||
{ value: "none", label: "선택 안함" },
|
||||
...tables.map((t) => ({
|
||||
value: t.tableName,
|
||||
label:
|
||||
t.displayName && t.displayName !== t.tableName
|
||||
? `${t.displayName} (${t.tableName})`
|
||||
: t.tableName,
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col border-l bg-card">
|
||||
@@ -90,7 +99,11 @@ export function ColumnDetailPanel({
|
||||
{typeConf.label}
|
||||
</span>
|
||||
)}
|
||||
<span className="truncate font-mono text-sm font-medium">{column.columnName}</span>
|
||||
<span className="truncate text-sm font-medium">
|
||||
{column.displayName && column.displayName !== column.columnName
|
||||
? `${column.displayName} (${column.columnName})`
|
||||
: column.columnName}
|
||||
</span>
|
||||
</div>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onClose} aria-label="닫기">
|
||||
<X className="h-4 w-4" />
|
||||
@@ -207,7 +220,12 @@ export function ColumnDetailPanel({
|
||||
className="h-9 w-full justify-between text-xs"
|
||||
>
|
||||
{column.referenceColumn && column.referenceColumn !== "none"
|
||||
? column.referenceColumn
|
||||
? (() => {
|
||||
const matched = refColumns.find((c) => c.columnName === column.referenceColumn);
|
||||
return matched?.displayName && matched.displayName !== column.referenceColumn
|
||||
? `${matched.displayName} (${column.referenceColumn})`
|
||||
: column.referenceColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 opacity-50" />
|
||||
</Button>
|
||||
@@ -245,7 +263,13 @@ export function ColumnDetailPanel({
|
||||
column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{refCol.columnName}
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">
|
||||
{refCol.displayName && refCol.displayName !== refCol.columnName
|
||||
? `${refCol.displayName} (${refCol.columnName})`
|
||||
: refCol.columnName}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
@@ -259,12 +283,20 @@ export function ColumnDetailPanel({
|
||||
{/* 참조 요약 미니맵 */}
|
||||
{column.referenceTable && column.referenceTable !== "none" && column.referenceColumn && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-violet-50 px-3 py-2">
|
||||
<span className="font-mono text-[11px] font-semibold text-violet-600">
|
||||
{column.referenceTable}
|
||||
<span className="text-[11px] font-semibold text-violet-600">
|
||||
{(() => {
|
||||
const tbl = refTableOpts.find((o) => o.value === column.referenceTable);
|
||||
return tbl?.label ?? column.referenceTable;
|
||||
})()}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-[10px]">→</span>
|
||||
<span className="font-mono text-[11px] font-semibold text-violet-600">
|
||||
{column.referenceColumn}
|
||||
<span className="text-[11px] font-semibold text-violet-600">
|
||||
{(() => {
|
||||
const col = refColumns.find((c) => c.columnName === column.referenceColumn);
|
||||
return col?.displayName && col.displayName !== column.referenceColumn
|
||||
? `${col.displayName} (${column.referenceColumn})`
|
||||
: column.referenceColumn;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -5,8 +5,9 @@ import { MoreHorizontal, Database, Layers, FileStack } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ColumnTypeInfo } from "./types";
|
||||
import type { ColumnTypeInfo, TableInfo } from "./types";
|
||||
import { INPUT_TYPE_COLORS, getColumnGroup } from "./types";
|
||||
import type { ReferenceTableColumn } from "@/lib/api/entityJoin";
|
||||
|
||||
export interface ColumnGridConstraints {
|
||||
primaryKey: { columns: string[] };
|
||||
@@ -23,6 +24,9 @@ export interface ColumnGridProps {
|
||||
getColumnIndexState?: (columnName: string) => { isPk: boolean; hasIndex: boolean };
|
||||
onPkToggle?: (columnName: string, checked: boolean) => void;
|
||||
onIndexToggle?: (columnName: string, checked: boolean) => void;
|
||||
/** 호버 시 한글 라벨 표시용 (Badge title) */
|
||||
tables?: TableInfo[];
|
||||
referenceTableColumns?: Record<string, ReferenceTableColumn[]>;
|
||||
}
|
||||
|
||||
function getIndexState(
|
||||
@@ -53,6 +57,8 @@ export function ColumnGrid({
|
||||
getColumnIndexState: externalGetIndexState,
|
||||
onPkToggle,
|
||||
onIndexToggle,
|
||||
tables,
|
||||
referenceTableColumns,
|
||||
}: ColumnGridProps) {
|
||||
const getIdxState = useMemo(
|
||||
() => externalGetIndexState ?? ((name: string) => getIndexState(name, constraints)),
|
||||
@@ -136,13 +142,12 @@ export function ColumnGrid({
|
||||
{/* 4px 색상바 (타입별 진한 색) */}
|
||||
<div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />
|
||||
|
||||
{/* 라벨 + 컬럼명 */}
|
||||
{/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">
|
||||
{column.displayName || column.columnName}
|
||||
</div>
|
||||
<div className="truncate font-mono text-xs text-muted-foreground">
|
||||
{column.columnName}
|
||||
{column.displayName && column.displayName !== column.columnName
|
||||
? `${column.displayName} (${column.columnName})`
|
||||
: column.columnName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -150,11 +155,38 @@ export function ColumnGrid({
|
||||
<div className="flex min-w-0 flex-wrap gap-1">
|
||||
{column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" && (
|
||||
<>
|
||||
<Badge variant="outline" className="text-xs font-normal">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs font-normal"
|
||||
title={
|
||||
tables
|
||||
? (() => {
|
||||
const t = tables.find((tb) => tb.tableName === column.referenceTable);
|
||||
return t?.displayName && t.displayName !== t.tableName
|
||||
? `${t.displayName} (${column.referenceTable})`
|
||||
: column.referenceTable;
|
||||
})()
|
||||
: column.referenceTable
|
||||
}
|
||||
>
|
||||
{column.referenceTable}
|
||||
</Badge>
|
||||
<span className="text-muted-foreground text-xs">→</span>
|
||||
<Badge variant="outline" className="text-xs font-normal">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs font-normal"
|
||||
title={
|
||||
referenceTableColumns?.[column.referenceTable]
|
||||
? (() => {
|
||||
const refCols = referenceTableColumns[column.referenceTable];
|
||||
const c = refCols.find((rc) => rc.columnName === (column.referenceColumn ?? ""));
|
||||
return c?.displayName && c.displayName !== c.columnName
|
||||
? `${c.displayName} (${column.referenceColumn})`
|
||||
: column.referenceColumn ?? "—";
|
||||
})()
|
||||
: column.referenceColumn ?? "—"
|
||||
}
|
||||
>
|
||||
{column.referenceColumn || "—"}
|
||||
</Badge>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user