jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

레이아웃 수정

Browse Source
This commit is contained in:
hyeonsu
2025-09-05 18:21:28 +09:00
parent f74442dce5
commit b02e9610ea
3 changed files with 103 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/components/dataflow/TableSelector.tsx
View File

@@ -4,8 +4,7 @@ import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Search, Plus, Database } from "lucide-react";
import { Search, Database } from "lucide-react";
import { DataFlowAPI, TableDefinition, TableInfo } from "@/lib/api/dataflow";
interface TableSelectorProps {
@@ -109,44 +108,36 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
</div>
</div>
) : (
filteredTables.map((table) => (
<Card
key={table.tableName}
className={`transition-all hover:shadow-md ${
isTableSelected(table.tableName) ? "border-blue-500 bg-blue-50" : "hover:border-gray-300"
}`}
>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-sm font-medium">{table.displayName}</CardTitle>
<div className="flex items-center gap-2">
<Badge variant="default" className="text-xs">
{table.columnCount}개 컬럼
</Badge>
<Button
onClick={() => handleAddTable(table)}
disabled={isTableSelected(table.tableName)}
size="sm"
className="h-7 px-2"
>
<Plus className="h-3 w-3" />
{isTableSelected(table.tableName) ? "추가됨" : "추가"}
</Button>
</div>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="space-y-2">
<div className="flex items-center gap-2 text-xs text-gray-600">
<Database className="h-3 w-3" />
<span className="font-mono">{table.tableName}</span>
filteredTables.map((table) => {
const isSelected = isTableSelected(table.tableName);
return (
<Card
key={table.tableName}
className={`cursor-pointer transition-all hover:shadow-md ${
isSelected ? "cursor-not-allowed border-blue-500 bg-blue-50 opacity-60" : "hover:border-gray-300"
}`}
onDoubleClick={() => !isSelected && handleAddTable(table)}
>
<CardHeader className="pb-2">
<div>
<CardTitle className="text-sm font-medium">{table.displayName}</CardTitle>
<div className="mt-1 text-xs text-gray-500">{table.columnCount}개 컬럼</div>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="space-y-2">
<div className="flex items-center gap-2 text-xs text-gray-600">
<Database className="h-3 w-3" />
<span className="font-mono">{table.tableName}</span>
{isSelected && <span className="font-medium text-blue-600">(추가됨)</span>}
</div>
{table.description && <p className="line-clamp-2 text-xs text-gray-500">{table.description}</p>}
</div>
</CardContent>
</Card>
))
{table.description && <p className="line-clamp-2 text-xs text-gray-500">{table.description}</p>}
</div>
</CardContent>
</Card>
);
})
)}
</div>