스크롤 기능 포함
This commit is contained in:
leeheejin
@@ -122,7 +122,7 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-h-[90vh] max-w-5xl" aria-describedby="modal-description">
|
||||
<DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto" aria-describedby="modal-description">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{connectionName} - SQL 쿼리 실행</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -131,7 +131,7 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
|
||||
</DialogHeader>
|
||||
|
||||
{/* 쿼리 입력 영역 */}
|
||||
<div className="mb-4 space-y-4">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
{/* 테이블 선택 */}
|
||||
<div className="flex flex-col gap-4">
|
||||
@@ -168,28 +168,32 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
|
||||
{/* 테이블 정보 */}
|
||||
<div className="bg-muted/50 rounded-md border p-4">
|
||||
<h3 className="mb-2 font-medium">사용 가능한 테이블</h3>
|
||||
<div className="space-y-4">
|
||||
{tables.map((table) => (
|
||||
<div key={table.table_name} className="border-b pb-2 last:border-b-0 last:pb-0">
|
||||
<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>
|
||||
</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 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="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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,7 +222,7 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
|
||||
</div>
|
||||
|
||||
{/* 결과 섹션 */}
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{loading ? "쿼리 실행 중..." : results.length > 0 ? `${results.length}개의 결과가 있습니다.` : "실행된 쿼리가 없습니다."}
|
||||
@@ -227,45 +231,49 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
|
||||
|
||||
{/* 결과 그리드 */}
|
||||
<div className="rounded-md border">
|
||||
<div className="max-h-[400px] overflow-auto">
|
||||
<Table>
|
||||
{results.length > 0 ? (
|
||||
<>
|
||||
<TableHeader className="sticky top-0 bg-white">
|
||||
<TableRow>
|
||||
{Object.keys(results[0]).map((key) => (
|
||||
<TableHead key={key} className="font-mono font-bold">
|
||||
{key}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{results.map((row: QueryResult, i: number) => (
|
||||
<TableRow key={i} className="hover:bg-muted/50">
|
||||
{Object.values(row).map((value, j) => (
|
||||
<TableCell key={j} className="font-mono">
|
||||
{value === null ? (
|
||||
<span className="text-muted-foreground italic">NULL</span>
|
||||
) : (
|
||||
String(value)
|
||||
)}
|
||||
</TableCell>
|
||||
<div className="max-h-[300px] overflow-y-auto">
|
||||
<div className="min-w-full inline-block align-middle">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
{results.length > 0 ? (
|
||||
<>
|
||||
<TableHeader className="sticky top-0 bg-white z-10">
|
||||
<TableRow>
|
||||
{Object.keys(results[0]).map((key) => (
|
||||
<TableHead key={key} className="font-mono font-bold">
|
||||
{key}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{results.map((row: QueryResult, i: number) => (
|
||||
<TableRow key={i} className="hover:bg-muted/50">
|
||||
{Object.values(row).map((value, j) => (
|
||||
<TableCell key={j} className="font-mono whitespace-nowrap">
|
||||
{value === null ? (
|
||||
<span className="text-muted-foreground italic">NULL</span>
|
||||
) : (
|
||||
String(value)
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="text-muted-foreground h-32 text-center">
|
||||
{loading ? "쿼리 실행 중..." : "쿼리를 실행하면 결과가 여기에 표시됩니다."}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="text-muted-foreground h-32 text-center">
|
||||
{loading ? "쿼리 실행 중..." : "쿼리를 실행하면 결과가 여기에 표시됩니다."}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user