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

ui, 외부커넥션에서 쿼리 조회만 가능하도록

Browse Source
This commit is contained in:
leeheejin
2025-09-30 10:30:05 +09:00
parent 9168ab9a41
commit 8c19d57ced
24 changed files with 452 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
View File

@@ -253,7 +253,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
padding: "32px", // 패딩 대폭 증가
width: "100%",
height: "100%",
background: "linear-gradient(to br, #f8fafc, #f1f5f9)", // 부드러운 그라데이션 배경
background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤)
overflow: "auto",
borderRadius: "12px", // 컨테이너 자체도 라운드 처리
};
@@ -336,7 +336,22 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
<>
<style jsx>{`
.card-hover {
transition: all 0.2s ease-in-out;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.card-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.card-hover:hover::before {
left: 100%;
}
.card-hover:hover {
transform: translateY(-2px);
@@ -345,6 +360,20 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-color: #3b82f6;
}
.card-container {
position: relative;
}
.card-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
border-radius: 12px;
pointer-events: none;
}
`}</style>
<div
className={className}
@@ -357,7 +386,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
onDragEnd={onDragEnd}
{...safeDomProps}
>
<div style={containerStyle}>
<div style={containerStyle} className="card-container">
{displayData.length === 0 ? (
<div
style={{
@@ -392,7 +421,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
<div
key={data.id || index}
style={cardStyle}
className="group cursor-pointer hover:transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ease-out"
className="card-hover group cursor-pointer"
onClick={() => handleCardClick(data)}
>
{/* 카드 이미지 - 통일된 디자인 */}

50
frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
View File

@@ -46,10 +46,11 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
return (
<div
className="relative h-full overflow-auto rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm"
className="relative h-full overflow-x-auto overflow-y-auto rounded-2xl border border-gray-200/40 bg-white shadow-sm backdrop-blur-sm"
style={{
width: "100%",
maxWidth: "100%",
maxHeight: "100%", // 최대 높이 제한으로 스크롤 활성화
boxSizing: "border-box",
}}
>
@@ -57,12 +58,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
className="w-full"
style={{
width: "100%",
maxWidth: "100%",
tableLayout: "fixed",
minWidth: "100%",
tableLayout: "auto", // 테이블 크기 자동 조정
boxSizing: "border-box",
}}
>
<TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60" : "bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60"}>
<TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40" : "bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40"}>
<TableRow className="border-b border-gray-200/40">
{visibleColumns.map((column, colIndex) => {
// 왼쪽 고정 컬럼들의 누적 너비 계산
@@ -84,23 +85,24 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
key={column.columnName}
className={cn(
column.columnName === "__checkbox__"
? "h-12 border-0 px-4 py-3 text-center align-middle"
: "h-12 cursor-pointer border-0 px-4 py-3 text-left align-middle font-semibold whitespace-nowrap text-slate-700 select-none transition-all duration-200",
? "h-12 border-0 px-6 py-4 text-center align-middle"
: "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 select-none transition-all duration-200 hover:text-gray-900",
`text-${column.align}`,
column.sortable && "hover:bg-blue-50/50 hover:text-blue-700",
column.sortable && "hover:bg-orange-200/70",
// 고정 컬럼 스타일
column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
// 숨김 컬럼 스타일 (디자인 모드에서만)
isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
)}
style={{
width: getColumnWidth(column),
minWidth: getColumnWidth(column),
maxWidth: getColumnWidth(column),
minWidth: "100px", // 최소 너비 보장
maxWidth: "300px", // 최대 너비 제한
boxSizing: "border-box",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
// sticky 위치 설정
...(column.fixed === "left" && { left: leftFixedWidth }),
...(column.fixed === "right" && { right: rightFixedWidth }),
@@ -117,16 +119,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
<span className="flex-1 truncate">
{columnLabels[column.columnName] || column.displayName || column.columnName}
</span>
{column.sortable && (
{column.sortable && sortColumn === column.columnName && (
<span className="ml-2 flex h-5 w-5 items-center justify-center rounded-md bg-white/50 shadow-sm">
{sortColumn === column.columnName ? (
sortDirection === "asc" ? (
<ArrowUp className="h-3.5 w-3.5 text-blue-600" />
) : (
<ArrowDown className="h-3.5 w-3.5 text-blue-600" />
)
{sortDirection === "asc" ? (
<ArrowUp className="h-3.5 w-3.5 text-blue-600" />
) : (
<ArrowUpDown className="h-3.5 w-3.5 text-gray-400" />
<ArrowDown className="h-3.5 w-3.5 text-blue-600" />
)}
</span>
)}
@@ -159,9 +157,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
<TableRow
key={`row-${index}`}
className={cn(
"h-12 cursor-pointer border-b border-gray-100/60 leading-none transition-all duration-200",
tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/20 hover:shadow-sm",
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gradient-to-r from-slate-50/30 to-gray-50/20",
"h-12 cursor-pointer border-b border-gray-100/40 leading-none transition-all duration-200",
tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
)}
style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
onClick={() => handleRowClick(row)}
@@ -185,17 +183,19 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
<TableCell
key={`cell-${column.columnName}`}
className={cn(
"h-12 px-4 py-3 align-middle text-sm whitespace-nowrap text-slate-600 transition-all duration-200",
"h-12 px-6 py-4 align-middle text-sm whitespace-nowrap text-gray-600 transition-all duration-200",
`text-${column.align}`,
// 고정 컬럼 스타일
column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-white/90 backdrop-blur-sm",
column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-white/90 backdrop-blur-sm",
column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
)}
style={{
minHeight: "48px",
height: "48px",
verticalAlign: "middle",
width: getColumnWidth(column),
minWidth: "100px", // 최소 너비 보장
maxWidth: "300px", // 최대 너비 제한
boxSizing: "border-box",
overflow: "hidden",
textOverflow: "ellipsis",

92
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@@ -298,7 +298,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
width: "100%", // 컨테이너 전체 너비 사용
maxWidth: "100%", // 최대 너비 제한
height: "auto", // 항상 자동 높이로 테이블 크기에 맞춤
minHeight: isDesignMode ? `${Math.min(optimalHeight, 400)}px` : `${optimalHeight}px`, // 최소 높이 보장
minHeight: isDesignMode ? "200px" : "300px", // 최소 높이만 보장
maxHeight: isDesignMode ? "600px" : "800px", // 최대 높이 제한으로 스크롤 활성화
...component.style,
...style,
display: "flex",
@@ -1315,8 +1316,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<div
style={{ ...componentStyle, zIndex: 10 }} // 🎯 componentStyle + z-index 추가
className={cn(
"rounded-lg border border-gray-200 bg-white shadow-md shadow-blue-100/50",
"relative overflow-hidden", // 🎯 항상 overflow-hidden 적용 + relative 추가
"relative overflow-hidden",
"bg-white border border-gray-200/60",
"rounded-2xl shadow-sm",
"backdrop-blur-sm",
"transition-all duration-300 ease-out",
isSelected && "ring-2 ring-blue-500/20 shadow-lg shadow-blue-500/10",
className,
)}
{...domProps}
@@ -1324,7 +1329,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
{/* 헤더 */}
{tableConfig.showHeader && (
<div
className="flex items-center justify-between border-b border-gray-200 bg-gray-100/80 px-6 py-4"
className="flex items-center justify-between border-b border-gray-200/40 bg-gradient-to-r from-slate-50/80 to-gray-50/60 px-6 py-5"
style={{
width: "100%",
maxWidth: "100%",
@@ -1333,14 +1338,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
>
<div className="flex items-center space-x-4">
{(tableConfig.title || tableLabel) && (
<h3 className="text-lg font-semibold text-gray-900">{tableConfig.title || tableLabel}</h3>
<h3 className="text-xl font-semibold text-gray-800 tracking-tight">{tableConfig.title || tableLabel}</h3>
)}
</div>
<div className="flex items-center space-x-3">
{/* 선택된 항목 정보 표시 */}
{selectedRows.size > 0 && (
<div className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1">
<div className="flex items-center space-x-2 rounded-full bg-blue-50/80 px-4 py-2 backdrop-blur-sm">
<span className="text-sm font-medium text-blue-700">{selectedRows.size}개 선택됨</span>
</div>
)}
@@ -1351,15 +1356,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
size="sm"
onClick={handleRefresh}
disabled={loading}
style={buttonStyle}
className="group relative rounded-lg shadow-sm [&:hover]:opacity-90"
className="group relative rounded-xl border-gray-200/60 bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-200 hover:bg-gray-50/80"
>
<div className="flex items-center space-x-2">
<div className="relative">
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} style={{ color: buttonTextColor }} />
{loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-200/30"></div>}
<RefreshCw className={cn("h-4 w-4 text-gray-600", loading && "animate-spin")} />
{loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-100/40"></div>}
</div>
<span className="text-sm font-medium" style={{ color: buttonTextColor }}>
<span className="text-sm font-medium text-gray-700">
{loading ? "새로고침 중..." : "새로고침"}
</span>
</div>
@@ -1399,7 +1403,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
{/* 테이블 컨텐츠 */}
<div
className={`w-full overflow-hidden ${localPageSize >= 50 ? "flex-1" : ""}`}
className={`w-full overflow-auto flex-1`}
style={{
width: "100%",
maxWidth: "100%",
@@ -1478,20 +1482,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
/>
</div>
) : (
// 기존 테이블 (가로 스크롤이 필요 없는 경우)
<div className="w-full overflow-hidden">
// 기존 테이블 (가로 스크롤이 필요한 경우)
<div className="w-full overflow-x-auto overflow-y-auto">
<Table
className="w-full"
style={{
width: "100%",
maxWidth: "100%",
tableLayout: "fixed", // 테이블 크기 고정
minWidth: "100%",
tableLayout: "auto", // 테이블 크기 자동 조정
}}
>
<TableHeader
className={cn(
tableConfig.stickyHeader ? "sticky top-0 z-20" : "",
"border-b border-gray-200 bg-gray-100/80",
"border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm",
)}
>
<TableRow
@@ -1508,7 +1512,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<TableHead
key={column.columnName}
style={{
width: column.width ? `${column.width}px` : undefined,
width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
minWidth: "100px", // 최소 너비 보장
maxWidth: "300px", // 최대 너비 제한
minHeight: "48px !important",
height: "48px !important",
verticalAlign: "middle",
@@ -1516,14 +1522,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
boxSizing: "border-box",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
}}
className={cn(
"h-12 px-4 py-3 align-middle text-sm font-semibold text-gray-800",
"h-12 px-6 py-4 align-middle text-sm font-semibold text-gray-700",
"transition-colors duration-200 ease-out",
column.columnName === "__checkbox__"
? "text-center"
: "cursor-pointer whitespace-nowrap select-none",
: "cursor-pointer whitespace-nowrap select-none hover:text-gray-900",
`text-${column.align}`,
column.sortable && "transition-colors duration-150 hover:bg-orange-100",
column.sortable && "hover:bg-orange-200/70",
)}
onClick={() => column.sortable && handleSort(column.columnName)}
>
@@ -1532,16 +1540,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
) : (
<div className="flex items-center space-x-2">
<span>{columnLabels[column.columnName] || column.displayName}</span>
{column.sortable && (
{column.sortable && sortColumn === column.columnName && (
<div className="flex flex-col">
{sortColumn === column.columnName ? (
sortDirection === "asc" ? (
<ArrowUp className="h-3 w-3 text-blue-600" />
) : (
<ArrowDown className="h-3 w-3 text-blue-600" />
)
{sortDirection === "asc" ? (
<ArrowUp className="h-3 w-3 text-blue-600" />
) : (
<ArrowUpDown className="h-3 w-3 text-gray-400" />
<ArrowDown className="h-3 w-3 text-blue-600" />
)}
</div>
)}
@@ -1572,14 +1576,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
onDragStart={(e) => handleRowDragStart(e, row, index)}
onDragEnd={handleRowDragEnd}
className={cn(
"group relative h-12 cursor-pointer border-b border-gray-100 transition-all duration-200",
"group relative h-12 cursor-pointer border-b border-gray-100/60 transition-all duration-200",
// 기본 스타일
tableConfig.tableStyle?.hoverEffect &&
"hover:bg-gradient-to-r hover:from-orange-200 hover:to-orange-300/90 hover:shadow-sm",
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-100/80",
"hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/40",
// 드래그 상태 스타일 (미묘하게)
draggedRowIndex === index &&
"border-blue-200 bg-gradient-to-r from-blue-50 to-blue-100/40 shadow-sm",
"border-blue-200/60 bg-gradient-to-r from-blue-50/60 to-indigo-50/40 shadow-sm",
isDragging && draggedRowIndex !== index && "opacity-70",
// 드래그 가능 표시
!isDesignMode && "hover:cursor-grab active:cursor-grabbing",
@@ -1597,14 +1601,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<TableCell
key={column.columnName}
className={cn(
"h-12 px-4 py-3 align-middle text-sm transition-all duration-200",
"h-12 px-6 py-4 align-middle text-sm transition-all duration-200 text-gray-600",
`text-${column.align}`,
)}
style={{
minHeight: "48px",
height: "48px",
verticalAlign: "middle",
width: column.width ? `${column.width}px` : undefined,
width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
minWidth: "100px", // 최소 너비 보장
maxWidth: "300px", // 최대 너비 제한
boxSizing: "border-box",
overflow: "hidden",
textOverflow: "ellipsis",
@@ -1722,7 +1728,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
// 데이터는 useEffect에서 자동으로 다시 로드됨
}}
className="rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-white"
className="rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300/60 hover:bg-white hover:shadow-md"
>
{(tableConfig.pagination?.pageSizeOptions || [10, 20, 50, 100]).map((size) => (
<option key={size} value={size}>
@@ -1733,13 +1739,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)}
{/* 페이지네이션 버튼 */}
<div className="flex items-center space-x-2 rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
<div className="flex items-center space-x-2 rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm p-1 shadow-sm">
<Button
variant="outline"
size="sm"
onClick={() => handlePageChange(1)}
disabled={currentPage === 1}
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
>
<ChevronsLeft className="h-4 w-4" />
</Button>
@@ -1748,13 +1754,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
size="sm"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
>
<ChevronLeft className="h-4 w-4" />
</Button>
<div className="flex items-center rounded-md border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-1">
<span className="text-sm font-semibold text-blue-800">{currentPage}</span>
<div className="flex items-center rounded-lg border border-gray-200/40 bg-gradient-to-r from-gray-50/80 to-slate-50/60 px-4 py-2 backdrop-blur-sm">
<span className="text-sm font-semibold text-gray-800">{currentPage}</span>
<span className="mx-2 font-light text-gray-400">/</span>
<span className="text-sm font-medium text-gray-600">{totalPages}</span>
</div>
@@ -1764,7 +1770,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
size="sm"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
>
<ChevronRight className="h-4 w-4" />
</Button>
@@ -1773,7 +1779,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
size="sm"
onClick={() => handlePageChange(totalPages)}
disabled={currentPage === totalPages}
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
>
<ChevronsRight className="h-4 w-4" />
</Button>