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

관계 수정 레이아웃 수정

Browse Source
This commit is contained in:
hyeonsu
2025-09-10 17:58:23 +09:00
parent 72b0d2ee98
commit 16bc77797a
1 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/components/dataflow/ConnectionSetupModal.tsx
View File

@@ -535,38 +535,26 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
<div className="rounded-lg border bg-gray-50 p-4"> <div className="rounded-lg border bg-gray-50 p-4">
<div className="mb-4 text-sm font-medium">테이블 및 컬럼 선택</div> <div className="mb-4 text-sm font-medium">테이블 및 컬럼 선택</div>
{/* 테이블 선택 */} {/* 현재 선택된 테이블 표시 */}
<div className="mb-4 grid grid-cols-2 gap-4"> <div className="mb-4 grid grid-cols-2 gap-4">
<div> <div>
<Label className="text-xs font-medium text-gray-600">From 테이블</Label> <Label className="text-xs font-medium text-gray-600">From 테이블</Label>
<Select value={selectedFromTable} onValueChange={setSelectedFromTable}> <div className="mt-1">
<SelectTrigger className="mt-1"> <span className="text-sm font-medium text-gray-800">
<SelectValue placeholder="테이블 선택" /> {availableTables.find((t) => t.tableName === selectedFromTable)?.displayName || selectedFromTable}
</SelectTrigger> </span>
<SelectContent> <span className="ml-2 text-xs text-gray-500">({selectedFromTable})</span>
{availableTables.map((table) => ( </div>
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName} ({table.tableName})
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
<div> <div>
<Label className="text-xs font-medium text-gray-600">To 테이블</Label> <Label className="text-xs font-medium text-gray-600">To 테이블</Label>
<Select value={selectedToTable} onValueChange={setSelectedToTable}> <div className="mt-1">
<SelectTrigger className="mt-1"> <span className="text-sm font-medium text-gray-800">
<SelectValue placeholder="테이블 선택" /> {availableTables.find((t) => t.tableName === selectedToTable)?.displayName || selectedToTable}
</SelectTrigger> </span>
<SelectContent> <span className="ml-2 text-xs text-gray-500">({selectedToTable})</span>
{availableTables.map((table) => ( </div>
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName} ({table.tableName})
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
</div> </div>
@@ -633,23 +621,35 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
{/* 선택된 컬럼 미리보기 */} {/* 선택된 컬럼 미리보기 */}
{(selectedFromColumns.length > 0 || selectedToColumns.length > 0) && ( {(selectedFromColumns.length > 0 || selectedToColumns.length > 0) && (
<div className="mt-4 flex items-center gap-2 text-sm"> <div className="mt-4 grid grid-cols-2 gap-4">
<span className="font-medium">{selectedFromTable}</span> <div>
<div className="flex flex-wrap gap-1"> <Label className="text-xs font-medium text-gray-600">선택된 From 컬럼</Label>
{selectedFromColumns.map((column) => ( <div className="mt-1 flex flex-wrap gap-1">
<Badge key={column} variant="outline" className="text-xs"> {selectedFromColumns.length > 0 ? (
{column} selectedFromColumns.map((column) => (
</Badge> <Badge key={column} variant="outline" className="text-xs">
))} {column}
</Badge>
))
) : (
<span className="text-xs text-gray-400">선택된 컬럼 없음</span>
)}
</div>
</div> </div>
<ArrowRight className="h-4 w-4 text-gray-400" />
<span className="font-medium">{selectedToTable}</span> <div>
<div className="flex flex-wrap gap-1"> <Label className="text-xs font-medium text-gray-600">선택된 To 컬럼</Label>
{selectedToColumns.map((column) => ( <div className="mt-1 flex flex-wrap gap-1">
<Badge key={column} variant="secondary" className="text-xs"> {selectedToColumns.length > 0 ? (
{column} selectedToColumns.map((column) => (
</Badge> <Badge key={column} variant="secondary" className="text-xs">
))} {column}
</Badge>
))
) : (
<span className="text-xs text-gray-400">선택된 컬럼 없음</span>
)}
</div>
</div> </div>
</div> </div>
)} )}