762 lines
28 KiB
TypeScript
762 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { TableListConfig, ColumnConfig, TableDataResponse } from "./types";
|
|
import { tableTypeApi } from "@/lib/api/screen";
|
|
import { entityJoinApi } from "@/lib/api/entityJoin";
|
|
import { commonCodeApi } from "@/lib/api/commonCode";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronsLeft,
|
|
ChevronsRight,
|
|
Search,
|
|
RefreshCw,
|
|
ArrowUpDown,
|
|
ArrowUp,
|
|
ArrowDown,
|
|
TableIcon,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface TableListComponentProps {
|
|
component: any;
|
|
isDesignMode?: boolean;
|
|
isSelected?: boolean;
|
|
isInteractive?: boolean;
|
|
onClick?: () => void;
|
|
onDragStart?: (e: React.DragEvent) => void;
|
|
onDragEnd?: (e: React.DragEvent) => void;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
formData?: Record<string, any>;
|
|
onFormDataChange?: (data: any) => void;
|
|
config?: TableListConfig;
|
|
|
|
// 추가 props (DOM에 전달되지 않음)
|
|
size?: { width: number; height: number };
|
|
position?: { x: number; y: number; z?: number };
|
|
componentConfig?: any;
|
|
selectedScreen?: any;
|
|
onZoneComponentDrop?: any;
|
|
onZoneClick?: any;
|
|
tableName?: string;
|
|
onRefresh?: () => void;
|
|
onClose?: () => void;
|
|
screenId?: string;
|
|
}
|
|
|
|
/**
|
|
* TableList 컴포넌트
|
|
* 데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트
|
|
*/
|
|
export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isInteractive = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
config,
|
|
className,
|
|
style,
|
|
formData,
|
|
onFormDataChange,
|
|
screenId,
|
|
size,
|
|
position,
|
|
componentConfig,
|
|
selectedScreen,
|
|
onZoneComponentDrop,
|
|
onZoneClick,
|
|
tableName,
|
|
onRefresh,
|
|
onClose,
|
|
}) => {
|
|
// 컴포넌트 설정
|
|
const tableConfig = {
|
|
...config,
|
|
...component.config,
|
|
...componentConfig,
|
|
} as TableListConfig;
|
|
|
|
// 상태 관리
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(0);
|
|
const [totalItems, setTotalItems] = useState(0);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [sortColumn, setSortColumn] = useState<string | null>(null);
|
|
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
|
const [columnLabels, setColumnLabels] = useState<Record<string, string>>({});
|
|
const [tableLabel, setTableLabel] = useState<string>("");
|
|
const [localPageSize, setLocalPageSize] = useState<number>(tableConfig.pagination?.pageSize || 20); // 로컬 페이지 크기 상태
|
|
const [selectedSearchColumn, setSelectedSearchColumn] = useState<string>(""); // 선택된 검색 컬럼
|
|
const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]); // 🎯 표시할 컬럼 (Entity 조인 적용됨)
|
|
const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string }>>({}); // 🎯 컬럼 메타정보 (웹타입, 코드카테고리)
|
|
const [codeCache, setCodeCache] = useState<Record<string, Record<string, string>>>({}); // 🎯 코드명 캐시 (categoryCode: {codeValue: codeName})
|
|
|
|
// 높이 계산 함수
|
|
const calculateOptimalHeight = () => {
|
|
// 50개 이상일 때는 20개 기준으로 높이 고정
|
|
const displayPageSize = localPageSize >= 50 ? 20 : localPageSize;
|
|
const headerHeight = 48; // 테이블 헤더
|
|
const rowHeight = 40; // 각 행 높이 (normal)
|
|
const searchHeight = tableConfig.filter?.enabled ? 48 : 0; // 검색 영역
|
|
const footerHeight = tableConfig.showFooter ? 56 : 0; // 페이지네이션
|
|
const padding = 8; // 여백
|
|
|
|
return headerHeight + displayPageSize * rowHeight + searchHeight + footerHeight + padding;
|
|
};
|
|
|
|
// 스타일 계산
|
|
const componentStyle: React.CSSProperties = {
|
|
width: "100%",
|
|
height:
|
|
tableConfig.height === "fixed"
|
|
? `${tableConfig.fixedHeight || calculateOptimalHeight()}px`
|
|
: tableConfig.height === "auto"
|
|
? `${calculateOptimalHeight()}px`
|
|
: "100%",
|
|
...component.style,
|
|
...style,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
};
|
|
|
|
// 디자인 모드 스타일
|
|
if (isDesignMode) {
|
|
componentStyle.border = "1px dashed #cbd5e1";
|
|
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
|
componentStyle.minHeight = "200px";
|
|
}
|
|
|
|
// 컬럼 라벨 정보 가져오기
|
|
const fetchColumnLabels = async () => {
|
|
if (!tableConfig.selectedTable) return;
|
|
|
|
try {
|
|
const response = await tableTypeApi.getColumns(tableConfig.selectedTable);
|
|
// API 응답 구조 확인 및 컬럼 배열 추출
|
|
const columns = response.columns || response;
|
|
const labels: Record<string, string> = {};
|
|
const meta: Record<string, { webType?: string; codeCategory?: string }> = {};
|
|
|
|
columns.forEach((column: any) => {
|
|
labels[column.columnName] = column.displayName || column.columnName;
|
|
// 🎯 웹타입과 코드카테고리 정보 저장
|
|
meta[column.columnName] = {
|
|
webType: column.webType,
|
|
codeCategory: column.codeCategory,
|
|
};
|
|
});
|
|
|
|
setColumnLabels(labels);
|
|
setColumnMeta(meta);
|
|
console.log("🔍 컬럼 라벨 설정 완료:", labels);
|
|
console.log("🔍 컬럼 메타정보 설정 완료:", meta);
|
|
} catch (error) {
|
|
console.log("컬럼 라벨 정보를 가져올 수 없습니다:", error);
|
|
}
|
|
};
|
|
|
|
// 🎯 코드 캐시 로드 함수
|
|
const loadCodeCache = async (categoryCode: string): Promise<void> => {
|
|
if (codeCache[categoryCode]) {
|
|
return; // 이미 캐시됨
|
|
}
|
|
|
|
try {
|
|
const response = await commonCodeApi.options.getOptions(categoryCode);
|
|
const codeMap: Record<string, string> = {};
|
|
|
|
if (response.success && response.data) {
|
|
response.data.forEach((option: any) => {
|
|
// 🎯 대소문자 구분 없이 저장 (모두 대문자로 키 저장)
|
|
codeMap[option.value?.toUpperCase()] = option.label;
|
|
});
|
|
}
|
|
|
|
setCodeCache((prev) => ({
|
|
...prev,
|
|
[categoryCode]: codeMap,
|
|
}));
|
|
|
|
console.log(`📋 코드 캐시 로드 완료 [${categoryCode}]:`, codeMap);
|
|
} catch (error) {
|
|
console.error(`❌ 코드 캐시 로드 실패 [${categoryCode}]:`, error);
|
|
}
|
|
};
|
|
|
|
// 🎯 코드값을 코드명으로 변환하는 함수 (대소문자 구분 없음)
|
|
const convertCodeToName = (categoryCode: string, codeValue: string): string => {
|
|
if (!categoryCode || !codeValue) return codeValue;
|
|
|
|
const codes = codeCache[categoryCode];
|
|
if (!codes) return codeValue;
|
|
|
|
// 🎯 대소문자 구분 없이 검색
|
|
const upperCodeValue = codeValue.toUpperCase();
|
|
return codes[upperCodeValue] || codeValue;
|
|
};
|
|
|
|
// 테이블 라벨명 가져오기
|
|
const fetchTableLabel = async () => {
|
|
if (!tableConfig.selectedTable) return;
|
|
|
|
try {
|
|
const tables = await tableTypeApi.getTables();
|
|
const table = tables.find((t: any) => t.tableName === tableConfig.selectedTable);
|
|
if (table && table.displayName && table.displayName !== table.tableName) {
|
|
setTableLabel(table.displayName);
|
|
} else {
|
|
setTableLabel(tableConfig.selectedTable);
|
|
}
|
|
} catch (error) {
|
|
console.log("테이블 라벨 정보를 가져올 수 없습니다:", error);
|
|
setTableLabel(tableConfig.selectedTable);
|
|
}
|
|
};
|
|
|
|
// 테이블 데이터 가져오기
|
|
const fetchTableData = async () => {
|
|
if (!tableConfig.selectedTable) {
|
|
setData([]);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// 🎯 Entity 조인 API 사용 - Entity 조인이 포함된 데이터 조회
|
|
console.log("🔗 Entity 조인 데이터 조회 시작:", tableConfig.selectedTable);
|
|
|
|
const result = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, {
|
|
page: currentPage,
|
|
size: localPageSize,
|
|
search: searchTerm?.trim()
|
|
? (() => {
|
|
// 스마트한 단일 컬럼 선택 로직 (서버가 OR 검색을 지원하지 않음)
|
|
let searchColumn = selectedSearchColumn || sortColumn; // 사용자 선택 컬럼 최우선, 그 다음 정렬된 컬럼
|
|
|
|
if (!searchColumn) {
|
|
// 1순위: name 관련 컬럼 (가장 검색에 적합)
|
|
const nameColumns = visibleColumns.filter(
|
|
(col) =>
|
|
col.columnName.toLowerCase().includes("name") ||
|
|
col.columnName.toLowerCase().includes("title") ||
|
|
col.columnName.toLowerCase().includes("subject"),
|
|
);
|
|
|
|
// 2순위: text/varchar 타입 컬럼
|
|
const textColumns = visibleColumns.filter(
|
|
(col) => col.dataType === "text" || col.dataType === "varchar",
|
|
);
|
|
|
|
// 3순위: description 관련 컬럼
|
|
const descColumns = visibleColumns.filter(
|
|
(col) =>
|
|
col.columnName.toLowerCase().includes("desc") ||
|
|
col.columnName.toLowerCase().includes("comment") ||
|
|
col.columnName.toLowerCase().includes("memo"),
|
|
);
|
|
|
|
// 우선순위에 따라 선택
|
|
if (nameColumns.length > 0) {
|
|
searchColumn = nameColumns[0].columnName;
|
|
} else if (textColumns.length > 0) {
|
|
searchColumn = textColumns[0].columnName;
|
|
} else if (descColumns.length > 0) {
|
|
searchColumn = descColumns[0].columnName;
|
|
} else {
|
|
// 마지막 대안: 첫 번째 컬럼
|
|
searchColumn = visibleColumns[0]?.columnName || "id";
|
|
}
|
|
}
|
|
|
|
console.log("🔍 선택된 검색 컬럼:", searchColumn);
|
|
console.log("🔍 검색어:", searchTerm);
|
|
console.log(
|
|
"🔍 사용 가능한 컬럼들:",
|
|
visibleColumns.map((col) => `${col.columnName}(${col.dataType || "unknown"})`),
|
|
);
|
|
|
|
return { [searchColumn]: searchTerm };
|
|
})()
|
|
: undefined,
|
|
sortBy: sortColumn || undefined,
|
|
sortOrder: sortDirection,
|
|
enableEntityJoin: true, // 🎯 Entity 조인 활성화
|
|
});
|
|
|
|
if (result) {
|
|
setData(result.data || []);
|
|
setTotalPages(result.totalPages || 1);
|
|
setTotalItems(result.total || 0);
|
|
|
|
// 🎯 Entity 조인 정보 로깅
|
|
if (result.entityJoinInfo) {
|
|
console.log("🔗 Entity 조인 적용됨:", {
|
|
strategy: result.entityJoinInfo.strategy,
|
|
joinConfigs: result.entityJoinInfo.joinConfigs,
|
|
performance: result.entityJoinInfo.performance,
|
|
});
|
|
} else {
|
|
console.log("🔗 Entity 조인 없음");
|
|
}
|
|
|
|
// 🎯 코드 컬럼들의 캐시 미리 로드
|
|
const codeColumns = Object.entries(columnMeta).filter(
|
|
([_, meta]) => meta.webType === "code" && meta.codeCategory,
|
|
);
|
|
|
|
if (codeColumns.length > 0) {
|
|
console.log(
|
|
"📋 코드 컬럼 감지:",
|
|
codeColumns.map(([col, meta]) => `${col}(${meta.codeCategory})`),
|
|
);
|
|
|
|
// 필요한 코드 캐시들을 병렬로 로드
|
|
const loadPromises = codeColumns.map(([_, meta]) =>
|
|
meta.codeCategory ? loadCodeCache(meta.codeCategory) : Promise.resolve(),
|
|
);
|
|
|
|
try {
|
|
await Promise.all(loadPromises);
|
|
console.log("📋 모든 코드 캐시 로드 완료");
|
|
} catch (error) {
|
|
console.error("❌ 코드 캐시 로드 중 오류:", error);
|
|
}
|
|
}
|
|
|
|
// 🎯 Entity 조인된 컬럼 처리
|
|
let processedColumns = [...(tableConfig.columns || [])];
|
|
|
|
// 초기 컬럼이 있으면 먼저 설정
|
|
if (processedColumns.length > 0) {
|
|
setDisplayColumns(processedColumns);
|
|
}
|
|
if (result.entityJoinInfo?.joinConfigs) {
|
|
result.entityJoinInfo.joinConfigs.forEach((joinConfig) => {
|
|
// 원본 컬럼을 조인된 컬럼으로 교체
|
|
const originalColumnIndex = processedColumns.findIndex((col) => col.columnName === joinConfig.sourceColumn);
|
|
|
|
if (originalColumnIndex !== -1) {
|
|
console.log(`🔄 컬럼 교체: ${joinConfig.sourceColumn} → ${joinConfig.aliasColumn}`);
|
|
const originalColumn = processedColumns[originalColumnIndex];
|
|
processedColumns[originalColumnIndex] = {
|
|
...originalColumn,
|
|
columnName: joinConfig.aliasColumn, // dept_code → dept_code_name
|
|
displayName:
|
|
columnLabels[originalColumn.columnName] || originalColumn.displayName || originalColumn.columnName, // 올바른 라벨 사용
|
|
// isEntityJoined: true, // 🎯 임시 주석 처리 (타입 에러 해결 후 복원)
|
|
} as ColumnConfig;
|
|
console.log(
|
|
`✅ 조인 컬럼 라벨 유지: ${joinConfig.sourceColumn} → "${columnLabels[originalColumn.columnName] || originalColumn.displayName || originalColumn.columnName}"`,
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 컬럼 정보가 없으면 첫 번째 데이터 행에서 추출
|
|
if ((!processedColumns || processedColumns.length === 0) && result.data.length > 0) {
|
|
const autoColumns: ColumnConfig[] = Object.keys(result.data[0]).map((key, index) => ({
|
|
columnName: key,
|
|
displayName: columnLabels[key] || key, // 라벨명 우선 사용
|
|
visible: true,
|
|
sortable: true,
|
|
searchable: true,
|
|
align: "left",
|
|
format: "text",
|
|
order: index,
|
|
}));
|
|
|
|
// 컴포넌트 설정 업데이트 (부모 컴포넌트에 알림)
|
|
if (onFormDataChange) {
|
|
onFormDataChange({
|
|
...component,
|
|
config: {
|
|
...tableConfig,
|
|
columns: autoColumns,
|
|
},
|
|
});
|
|
}
|
|
processedColumns = autoColumns;
|
|
}
|
|
|
|
// 🎯 표시할 컬럼 상태 업데이트
|
|
setDisplayColumns(processedColumns);
|
|
}
|
|
} catch (err) {
|
|
console.error("테이블 데이터 로딩 오류:", err);
|
|
setError(err instanceof Error ? err.message : "데이터를 불러오는 중 오류가 발생했습니다.");
|
|
setData([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 페이지 변경
|
|
const handlePageChange = (newPage: number) => {
|
|
setCurrentPage(newPage);
|
|
};
|
|
|
|
// 정렬 변경
|
|
const handleSort = (column: string) => {
|
|
if (sortColumn === column) {
|
|
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
|
} else {
|
|
setSortColumn(column);
|
|
setSortDirection("asc");
|
|
}
|
|
};
|
|
|
|
// 검색
|
|
const handleSearch = (term: string) => {
|
|
setSearchTerm(term);
|
|
setCurrentPage(1); // 검색 시 첫 페이지로 이동
|
|
};
|
|
|
|
// 새로고침
|
|
const handleRefresh = () => {
|
|
fetchTableData();
|
|
};
|
|
|
|
// 효과
|
|
useEffect(() => {
|
|
if (tableConfig.selectedTable) {
|
|
fetchColumnLabels();
|
|
fetchTableLabel();
|
|
}
|
|
}, [tableConfig.selectedTable]);
|
|
|
|
// 컬럼 라벨이 로드되면 기존 컬럼의 displayName을 업데이트
|
|
useEffect(() => {
|
|
if (Object.keys(columnLabels).length > 0 && tableConfig.columns && tableConfig.columns.length > 0) {
|
|
const updatedColumns = tableConfig.columns.map((col) => ({
|
|
...col,
|
|
displayName: columnLabels[col.columnName] || col.displayName,
|
|
}));
|
|
|
|
// 부모 컴포넌트에 업데이트된 컬럼 정보 전달
|
|
if (onFormDataChange) {
|
|
onFormDataChange({
|
|
...component,
|
|
componentConfig: {
|
|
...tableConfig,
|
|
columns: updatedColumns,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}, [columnLabels]);
|
|
|
|
useEffect(() => {
|
|
if (tableConfig.autoLoad && !isDesignMode) {
|
|
fetchTableData();
|
|
}
|
|
}, [tableConfig.selectedTable, localPageSize, currentPage, searchTerm, sortColumn, sortDirection, columnLabels]);
|
|
|
|
// 표시할 컬럼 계산 (Entity 조인 적용됨)
|
|
const visibleColumns = useMemo(() => {
|
|
if (!displayColumns || displayColumns.length === 0) {
|
|
// displayColumns가 아직 설정되지 않은 경우 기본 컬럼 사용
|
|
if (!tableConfig.columns) return [];
|
|
return tableConfig.columns.filter((col) => col.visible).sort((a, b) => a.order - b.order);
|
|
}
|
|
return displayColumns.filter((col) => col.visible).sort((a, b) => a.order - b.order);
|
|
}, [displayColumns, tableConfig.columns]);
|
|
|
|
// 🎯 값 포맷팅 (코드 변환 포함)
|
|
const formatCellValue = (value: any, format?: string, columnName?: string) => {
|
|
if (value === null || value === undefined) return "";
|
|
|
|
// 🎯 코드 컬럼인 경우 코드명으로 변환
|
|
if (columnName && columnMeta[columnName]?.webType === "code" && columnMeta[columnName]?.codeCategory) {
|
|
const categoryCode = columnMeta[columnName].codeCategory!;
|
|
const convertedValue = convertCodeToName(categoryCode, String(value));
|
|
|
|
if (convertedValue !== String(value)) {
|
|
console.log(`🔄 코드 변환: ${columnName}[${categoryCode}] ${value} → ${convertedValue}`);
|
|
}
|
|
|
|
value = convertedValue;
|
|
}
|
|
|
|
switch (format) {
|
|
case "number":
|
|
return typeof value === "number" ? value.toLocaleString() : value;
|
|
case "currency":
|
|
return typeof value === "number" ? `₩${value.toLocaleString()}` : value;
|
|
case "date":
|
|
return value instanceof Date ? value.toLocaleDateString() : value;
|
|
case "boolean":
|
|
return value ? "예" : "아니오";
|
|
default:
|
|
return String(value);
|
|
}
|
|
};
|
|
|
|
// 이벤트 핸들러
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onClick?.();
|
|
};
|
|
|
|
// 행 클릭 핸들러
|
|
const handleRowClick = (row: any) => {
|
|
if (tableConfig.onRowClick) {
|
|
tableConfig.onRowClick(row);
|
|
}
|
|
};
|
|
|
|
// DOM에 전달할 수 있는 기본 props만 정의
|
|
const domProps = {
|
|
onClick: handleClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
};
|
|
|
|
// 디자인 모드에서의 플레이스홀더
|
|
if (isDesignMode && !tableConfig.selectedTable) {
|
|
return (
|
|
<div style={componentStyle} className={className} {...domProps}>
|
|
<div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300">
|
|
<div className="text-center text-gray-500">
|
|
<TableIcon className="mx-auto mb-2 h-8 w-8" />
|
|
<div className="text-sm font-medium">테이블 리스트</div>
|
|
<div className="text-xs text-gray-400">설정 패널에서 테이블을 선택해주세요</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={componentStyle} className={cn("rounded-lg border bg-white shadow-sm", className)} {...domProps}>
|
|
{/* 헤더 */}
|
|
{tableConfig.showHeader && (
|
|
<div className="flex items-center justify-between border-b p-4">
|
|
<div className="flex items-center space-x-4">
|
|
{(tableConfig.title || tableLabel) && (
|
|
<h3 className="text-lg font-medium">{tableConfig.title || tableLabel}</h3>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
{/* 검색 */}
|
|
{tableConfig.filter?.enabled && tableConfig.filter?.quickSearch && (
|
|
<div className="flex items-center space-x-2">
|
|
<div className="relative">
|
|
<Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
|
|
<Input
|
|
placeholder="검색..."
|
|
value={searchTerm}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
className="w-64 pl-8"
|
|
/>
|
|
</div>
|
|
{/* 검색 컬럼 선택 드롭다운 */}
|
|
{tableConfig.filter?.showColumnSelector && (
|
|
<select
|
|
value={selectedSearchColumn}
|
|
onChange={(e) => setSelectedSearchColumn(e.target.value)}
|
|
className="min-w-[120px] rounded border px-2 py-1 text-sm"
|
|
>
|
|
<option value="">자동 선택</option>
|
|
{visibleColumns.map((column) => (
|
|
<option key={column.columnName} value={column.columnName}>
|
|
{columnLabels[column.columnName] || column.displayName || column.columnName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 새로고침 */}
|
|
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
|
|
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 테이블 컨텐츠 */}
|
|
<div className={`flex-1 ${localPageSize >= 50 ? "overflow-auto" : "overflow-hidden"}`}>
|
|
{loading ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-center">
|
|
<RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin text-gray-400" />
|
|
<div className="text-sm text-gray-500">데이터를 불러오는 중...</div>
|
|
</div>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-center text-red-500">
|
|
<div className="text-sm">오류가 발생했습니다</div>
|
|
<div className="mt-1 text-xs text-gray-400">{error}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-10 bg-white" : ""}>
|
|
<TableRow>
|
|
{visibleColumns.map((column) => (
|
|
<TableHead
|
|
key={column.columnName}
|
|
style={{ width: column.width ? `${column.width}px` : undefined }}
|
|
className={cn(
|
|
"cursor-pointer select-none",
|
|
`text-${column.align}`,
|
|
column.sortable && "hover:bg-gray-50",
|
|
)}
|
|
onClick={() => column.sortable && handleSort(column.columnName)}
|
|
>
|
|
<div className="flex items-center space-x-1">
|
|
<span>{columnLabels[column.columnName] || column.displayName}</span>
|
|
{column.sortable && (
|
|
<div className="flex flex-col">
|
|
{sortColumn === column.columnName ? (
|
|
sortDirection === "asc" ? (
|
|
<ArrowUp className="h-3 w-3" />
|
|
) : (
|
|
<ArrowDown className="h-3 w-3" />
|
|
)
|
|
) : (
|
|
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={visibleColumns.length} className="py-8 text-center text-gray-500">
|
|
데이터가 없습니다
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
data.map((row, index) => (
|
|
<TableRow
|
|
key={index}
|
|
className={cn(
|
|
"cursor-pointer",
|
|
tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
|
|
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
|
|
)}
|
|
onClick={() => handleRowClick(row)}
|
|
>
|
|
{visibleColumns.map((column) => (
|
|
<TableCell key={column.columnName} className={`text-${column.align}`}>
|
|
{formatCellValue(row[column.columnName], column.format, column.columnName)}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
{/* 푸터/페이지네이션 */}
|
|
{tableConfig.showFooter && tableConfig.pagination?.enabled && (
|
|
<div className="flex items-center justify-between border-t p-4">
|
|
<div className="text-sm text-gray-500">
|
|
{tableConfig.pagination?.showPageInfo && (
|
|
<span>
|
|
전체 {totalItems.toLocaleString()}건 중 {(currentPage - 1) * localPageSize + 1}-
|
|
{Math.min(currentPage * localPageSize, totalItems)} 표시
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
{/* 페이지 크기 선택 */}
|
|
{tableConfig.pagination?.showSizeSelector && (
|
|
<select
|
|
value={localPageSize}
|
|
onChange={(e) => {
|
|
const newPageSize = parseInt(e.target.value);
|
|
|
|
// 로컬 상태만 업데이트 (데이터베이스에 저장하지 않음)
|
|
setLocalPageSize(newPageSize);
|
|
|
|
// 페이지를 1로 리셋
|
|
setCurrentPage(1);
|
|
|
|
// 데이터는 useEffect에서 자동으로 다시 로드됨
|
|
}}
|
|
className="rounded border px-2 py-1 text-sm"
|
|
>
|
|
{tableConfig.pagination?.pageSizeOptions?.map((size) => (
|
|
<option key={size} value={size}>
|
|
{size}개씩
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
|
|
{/* 페이지네이션 버튼 */}
|
|
<div className="flex items-center space-x-1">
|
|
<Button variant="outline" size="sm" onClick={() => handlePageChange(1)} disabled={currentPage === 1}>
|
|
<ChevronsLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handlePageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<span className="px-3 py-1 text-sm">
|
|
{currentPage} / {totalPages}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handlePageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handlePageChange(totalPages)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<ChevronsRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* TableList 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const TableListWrapper: React.FC<TableListComponentProps> = (props) => {
|
|
return <TableListComponent {...props} />;
|
|
};
|