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

외부커넥션관리

Browse Source
This commit is contained in:
leeheejin
2025-09-24 10:04:25 +09:00
parent affb6899cc
commit bc6e6056c1
32 changed files with 6580 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/components/admin/SqlQueryModal.tsx
View File

@@ -54,6 +54,8 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
const [tables, setTables] = useState<TableInfo[]>([]);
const [selectedTable, setSelectedTable] = useState("");
const [loadingTables, setLoadingTables] = useState(false);
const [selectedTableColumns, setSelectedTableColumns] = useState<TableColumn[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 테이블 목록 로딩
useEffect(() => {
@@ -79,6 +81,31 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
loadTables();
}, []);
// 테이블 선택 시 컬럼 정보 로딩
const loadTableColumns = async (tableName: string) => {
if (!tableName) {
setSelectedTableColumns([]);
return;
}
setLoadingColumns(true);
try {
const result = await ExternalDbConnectionAPI.getTableColumns(connectionId, tableName);
if (result.success && result.data) {
setSelectedTableColumns(result.data as TableColumn[]);
}
} catch (error) {
console.error("컬럼 정보 로딩 오류:", error);
toast({
title: "오류",
description: "컬럼 정보를 불러오는데 실패했습니다.",
variant: "destructive",
});
} finally {
setLoadingColumns(false);
}
};
const handleExecute = async () => {
console.log("실행 버튼 클릭");
if (!query.trim()) {
@@ -140,6 +167,7 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
value={selectedTable}
onValueChange={(value) => {
setSelectedTable(value);
loadTableColumns(value);
// 현재 커서 위치에 테이블 이름 삽입
setQuery((prev) => {
const fromIndex = prev.toUpperCase().lastIndexOf("FROM");
@@ -166,35 +194,72 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
</div>
{/* 테이블 정보 */}
<div className="bg-muted/50 rounded-md border p-4">
<h3 className="mb-2 font-medium">사용 가능한 테이블</h3>
<div className="space-y-4 max-h-[300px] overflow-y-auto">
<div className="pr-2">
{tables.map((table) => (
<div key={table.table_name} className="mb-4 bg-white rounded-lg shadow-sm border last:mb-0">
<div className="p-3">
<div className="bg-muted/50 rounded-md border p-4 space-y-4">
<div>
<h3 className="mb-2 font-medium">사용 가능한 테이블</h3>
<div className="max-h-[200px] overflow-y-auto">
<div className="pr-2 space-y-2">
{tables.map((table) => (
<div key={table.table_name} className="bg-white rounded-lg shadow-sm border p-3">
<div className="flex items-center justify-between">
<h4 className="font-mono font-bold">{table.table_name}</h4>
<Button variant="ghost" size="sm" onClick={() => setQuery(`SELECT * FROM ${table.table_name}`)}>
<Button
variant="ghost"
size="sm"
onClick={() => {
setSelectedTable(table.table_name);
loadTableColumns(table.table_name);
setQuery(`SELECT * FROM ${table.table_name}`);
}}
>
선택
</Button>
</div>
{table.description && (
<p className="text-muted-foreground mt-1 text-sm">{table.description}</p>
)}
<div className="mt-2 grid grid-cols-3 gap-2">
{table.columns.map((column: TableColumn) => (
<div key={column.column_name} className="text-sm">
<span className="font-mono">{column.column_name}</span>
<span className="text-muted-foreground ml-1">({column.data_type})</span>
</div>
))}
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
{/* 선택된 테이블의 컬럼 정보 */}
{selectedTable && (
<div>
<h3 className="mb-2 font-medium">테이블 컬럼 정보: {selectedTable}</h3>
{loadingColumns ? (
<div className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</div>
) : selectedTableColumns.length > 0 ? (
<div className="max-h-[200px] overflow-y-auto">
<div className="bg-white rounded-lg shadow-sm border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[200px]">컬럼명</TableHead>
<TableHead className="w-[150px]">데이터 타입</TableHead>
<TableHead className="w-[100px]">NULL 허용</TableHead>
<TableHead>기본값</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{selectedTableColumns.map((column) => (
<TableRow key={column.column_name}>
<TableCell className="font-mono font-medium">{column.column_name}</TableCell>
<TableCell className="text-sm">{column.data_type}</TableCell>
<TableCell className="text-sm">{column.is_nullable}</TableCell>
<TableCell className="text-sm">{column.column_default || '-'}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
) : (
<div className="text-sm text-muted-foreground">컬럼 정보를 불러올 수 없습니다.</div>
)}
</div>
)}
</div>
</div>