1631 lines
64 KiB
TypeScript
1631 lines
64 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect, useMemo } from "react";
|
||
import { TableListConfig, ColumnConfig } from "./types";
|
||
import { WebType } from "@/types/common";
|
||
import { tableTypeApi } from "@/lib/api/screen";
|
||
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||
import { codeCache } from "@/lib/caching/codeCache";
|
||
import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
import {
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
ChevronsLeft,
|
||
ChevronsRight,
|
||
RefreshCw,
|
||
ArrowUpDown,
|
||
ArrowUp,
|
||
ArrowDown,
|
||
TableIcon,
|
||
} from "lucide-react";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { cn } from "@/lib/utils";
|
||
import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearchFilters";
|
||
import { SingleTableWithSticky } from "./SingleTableWithSticky";
|
||
|
||
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;
|
||
|
||
// 선택된 행 정보 전달 핸들러
|
||
onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[]) => void;
|
||
|
||
// 설정 변경 핸들러 (상세설정과 연동)
|
||
onConfigChange?: (config: any) => void;
|
||
|
||
// 테이블 새로고침 키
|
||
refreshKey?: number;
|
||
}
|
||
|
||
/**
|
||
* TableList 컴포넌트
|
||
* 데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트
|
||
*/
|
||
export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||
component,
|
||
isDesignMode = false,
|
||
isSelected = false,
|
||
onClick,
|
||
onDragStart,
|
||
onDragEnd,
|
||
config,
|
||
className,
|
||
style,
|
||
onFormDataChange,
|
||
componentConfig,
|
||
onSelectedRowsChange,
|
||
onConfigChange,
|
||
refreshKey,
|
||
}) => {
|
||
// 컴포넌트 설정
|
||
const tableConfig = {
|
||
...config,
|
||
...component.config,
|
||
...componentConfig,
|
||
} as TableListConfig;
|
||
|
||
// 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
|
||
const buttonColor = component.style?.labelColor || '#3b83f6'; // 기본 파란색
|
||
const buttonTextColor = component.config?.buttonTextColor || '#ffffff';
|
||
const buttonStyle = {
|
||
backgroundColor: buttonColor,
|
||
color: buttonTextColor,
|
||
borderColor: buttonColor
|
||
};
|
||
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
|
||
// 상태 관리
|
||
const [data, setData] = useState<Record<string, 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 [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]); // 🎯 표시할 컬럼 (Entity 조인 적용됨)
|
||
|
||
// 🎯 조인 컬럼 매핑 상태
|
||
const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
|
||
const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string }>>({}); // 🎯 컬럼 메타정보 (웹타입, 코드카테고리)
|
||
|
||
// 고급 필터 관련 state
|
||
const [searchValues, setSearchValues] = useState<Record<string, any>>({});
|
||
|
||
// 체크박스 상태 관리
|
||
const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
|
||
|
||
// 드래그 상태 관리
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null); // 선택된 행들의 키 집합
|
||
const [isAllSelected, setIsAllSelected] = useState(false); // 전체 선택 상태
|
||
|
||
// 🎯 Entity 조인 최적화 훅 사용
|
||
const { optimizedConvertCode } = useEntityJoinOptimization(columnMeta, {
|
||
enableBatchLoading: true,
|
||
preloadCommonCodes: true,
|
||
maxBatchSize: 5,
|
||
});
|
||
|
||
// 높이 계산 함수 (메모이제이션)
|
||
const optimalHeight = useMemo(() => {
|
||
// 실제 데이터 개수에 맞춰서 높이 계산 (최소 5개, 최대 20개)
|
||
const actualDataCount = data.length;
|
||
const displayPageSize = Math.min(Math.max(actualDataCount, 5), 20);
|
||
|
||
const headerHeight = 50; // 테이블 헤더
|
||
const rowHeight = 42; // 각 행 높이
|
||
const searchHeight = tableConfig.filter?.enabled ? 80 : 0; // 검색 영역
|
||
const footerHeight = tableConfig.showFooter ? 60 : 0; // 페이지네이션
|
||
const titleHeight = tableConfig.showHeader ? 60 : 0; // 제목 영역
|
||
const padding = 40; // 여백
|
||
|
||
const calculatedHeight =
|
||
titleHeight + searchHeight + headerHeight + displayPageSize * rowHeight + footerHeight + padding;
|
||
|
||
console.log("🔍 테이블 높이 계산:", {
|
||
actualDataCount,
|
||
localPageSize,
|
||
displayPageSize,
|
||
isDesignMode,
|
||
titleHeight,
|
||
searchHeight,
|
||
headerHeight,
|
||
rowHeight,
|
||
footerHeight,
|
||
padding,
|
||
calculatedHeight,
|
||
finalHeight: `${calculatedHeight}px`,
|
||
});
|
||
|
||
// 추가 디버깅: 실제 데이터 상황
|
||
console.log("🔍 실제 데이터 상황:", {
|
||
actualDataLength: data.length,
|
||
localPageSize,
|
||
currentPage,
|
||
totalItems,
|
||
totalPages,
|
||
});
|
||
|
||
return calculatedHeight;
|
||
}, []);
|
||
|
||
// 🎯 강제로 그리드 컬럼수에 맞는 크기 적용 (디자인 모드에서는 더 큰 크기 허용)
|
||
const gridColumns = component.gridColumns || 1;
|
||
let calculatedWidth: string;
|
||
|
||
if (isDesignMode) {
|
||
// 디자인 모드에서는 더 큰 최소 크기 적용
|
||
if (gridColumns === 1) {
|
||
calculatedWidth = "400px"; // 1컬럼일 때 400px (디자인 모드)
|
||
} else if (gridColumns === 2) {
|
||
calculatedWidth = "600px"; // 2컬럼일 때 600px (디자인 모드)
|
||
} else if (gridColumns <= 6) {
|
||
calculatedWidth = `${gridColumns * 250}px`; // 컬럼당 250px (디자인 모드)
|
||
} else {
|
||
calculatedWidth = "100%"; // 7컬럼 이상은 전체
|
||
}
|
||
} else {
|
||
// 일반 모드는 기존 크기 유지
|
||
if (gridColumns === 1) {
|
||
calculatedWidth = "200px"; // 1컬럼일 때 200px 고정
|
||
} else if (gridColumns === 2) {
|
||
calculatedWidth = "400px"; // 2컬럼일 때 400px
|
||
} else if (gridColumns <= 6) {
|
||
calculatedWidth = `${gridColumns * 200}px`; // 컬럼당 200px
|
||
} else {
|
||
calculatedWidth = "100%"; // 7컬럼 이상은 전체
|
||
}
|
||
}
|
||
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
|
||
|
||
// 스타일 계산 (컨테이너에 맞춤)
|
||
const componentStyle: React.CSSProperties = {
|
||
width: "100%", // 컨테이너 전체 너비 사용
|
||
maxWidth: "100%", // 최대 너비 제한
|
||
height: "auto", // 항상 자동 높이로 테이블 크기에 맞춤
|
||
minHeight: isDesignMode ? `${Math.min(optimalHeight, 400)}px` : `${optimalHeight}px`, // 최소 높이 보장
|
||
...component.style,
|
||
...style,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
boxSizing: "border-box", // 패딩/보더 포함한 크기 계산
|
||
// overflow는 CSS 클래스로 처리
|
||
};
|
||
|
||
// 🎯 tableContainerStyle 제거 - componentStyle만 사용
|
||
|
||
// 디자인 모드 스타일
|
||
if (isDesignMode) {
|
||
componentStyle.border = "2px dashed #cbd5e1";
|
||
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
||
componentStyle.borderRadius = "8px";
|
||
componentStyle.padding = "4px"; // 약간의 패딩으로 구분감 확보
|
||
componentStyle.margin = "2px"; // 외부 여백으로 레이아웃과 구분
|
||
// 🎯 컨테이너에 맞춤
|
||
componentStyle.width = "calc(100% - 12px)"; // margin + padding 보정
|
||
componentStyle.maxWidth = "calc(100% - 12px)";
|
||
componentStyle.minWidth = "calc(100% - 12px)";
|
||
componentStyle.overflow = "hidden !important"; // 넘치는 부분 숨김 (강제)
|
||
componentStyle.boxSizing = "border-box"; // 패딩 포함 크기 계산
|
||
componentStyle.position = "relative"; // 위치 고정
|
||
// 자동 높이로 테이블 전체를 감쌈
|
||
}
|
||
|
||
// 컬럼 라벨 정보 가져오기
|
||
const fetchColumnLabels = async () => {
|
||
if (!tableConfig.selectedTable) return;
|
||
|
||
try {
|
||
const response = await tableTypeApi.getColumns(tableConfig.selectedTable);
|
||
// API 응답 구조 확인 및 컬럼 배열 추출
|
||
const columns = Array.isArray(response) ? response : (response as any).columns || [];
|
||
const labels: Record<string, string> = {};
|
||
const meta: Record<string, { webType?: string; codeCategory?: string }> = {};
|
||
|
||
columns.forEach((column: any) => {
|
||
// 🎯 Entity 조인된 컬럼의 경우 표시 컬럼명 사용
|
||
let displayLabel = column.displayName || column.columnName;
|
||
|
||
// Entity 타입인 경우
|
||
if (column.webType === "entity") {
|
||
// 우선 기준 테이블의 컬럼 라벨을 사용
|
||
displayLabel = column.displayName || column.columnName;
|
||
console.log(
|
||
`🎯 Entity 조인 컬럼 라벨 설정: ${column.columnName} → "${displayLabel}" (기준 테이블 라벨 사용)`,
|
||
);
|
||
}
|
||
|
||
labels[column.columnName] = displayLabel;
|
||
// 🎯 웹타입과 코드카테고리 정보 저장
|
||
meta[column.columnName] = {
|
||
webType: column.webType,
|
||
codeCategory: column.codeCategory,
|
||
};
|
||
});
|
||
|
||
setColumnLabels(labels);
|
||
setColumnMeta(meta);
|
||
console.log("🔍 컬럼 라벨 설정 완료:", labels);
|
||
console.log("🔍 컬럼 메타정보 설정 완료:", meta);
|
||
} catch (error) {
|
||
console.log("컬럼 라벨 정보를 가져올 수 없습니다:", error);
|
||
}
|
||
};
|
||
|
||
// 🎯 전역 코드 캐시 사용으로 함수 제거 (codeCache.convertCodeToName 사용)
|
||
|
||
// 테이블 라벨명 가져오기
|
||
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);
|
||
|
||
// Entity 조인 컬럼 추출 (isEntityJoin === true인 컬럼들)
|
||
const entityJoinColumns = tableConfig.columns?.filter((col) => col.isEntityJoin && col.entityJoinInfo) || [];
|
||
|
||
// 🎯 조인 탭에서 추가한 컬럼들도 포함 (실제로 존재하는 컬럼만)
|
||
const joinTabColumns =
|
||
tableConfig.columns?.filter(
|
||
(col) =>
|
||
!col.isEntityJoin &&
|
||
col.columnName.includes("_") &&
|
||
(col.columnName.includes("dept_code_") ||
|
||
col.columnName.includes("_dept_code") ||
|
||
col.columnName.includes("_company_") ||
|
||
col.columnName.includes("_user_")), // 조인 탭에서 추가한 컬럼 패턴들
|
||
) || [];
|
||
|
||
console.log(
|
||
"🔍 조인 탭 컬럼들:",
|
||
joinTabColumns.map((c) => c.columnName),
|
||
);
|
||
|
||
const additionalJoinColumns = [
|
||
...entityJoinColumns.map((col) => ({
|
||
sourceTable: col.entityJoinInfo!.sourceTable,
|
||
sourceColumn: col.entityJoinInfo!.sourceColumn,
|
||
joinAlias: col.entityJoinInfo!.joinAlias,
|
||
})),
|
||
// 🎯 조인 탭에서 추가한 컬럼들도 추가 (실제로 존재하는 컬럼만)
|
||
...joinTabColumns
|
||
.filter((col) => {
|
||
// 실제 API 응답에 존재하는 컬럼만 필터링
|
||
const validJoinColumns = ["dept_code_name", "dept_name"];
|
||
const isValid = validJoinColumns.includes(col.columnName);
|
||
if (!isValid) {
|
||
console.log(`🔍 조인 탭 컬럼 제외: ${col.columnName} (유효하지 않음)`);
|
||
}
|
||
return isValid;
|
||
})
|
||
.map((col) => {
|
||
// 실제 존재하는 조인 컬럼만 처리
|
||
let sourceTable = tableConfig.selectedTable;
|
||
let sourceColumn = col.columnName;
|
||
|
||
if (col.columnName === "dept_code_name" || col.columnName === "dept_name") {
|
||
sourceTable = "dept_info";
|
||
sourceColumn = "dept_code";
|
||
}
|
||
|
||
console.log(`🔍 조인 탭 컬럼 처리: ${col.columnName} -> ${sourceTable}.${sourceColumn}`);
|
||
|
||
return {
|
||
sourceTable: sourceTable || tableConfig.selectedTable || "",
|
||
sourceColumn: sourceColumn,
|
||
joinAlias: col.columnName,
|
||
};
|
||
}),
|
||
];
|
||
|
||
// 🎯 화면별 엔티티 표시 설정 생성
|
||
const screenEntityConfigs: Record<string, any> = {};
|
||
entityJoinColumns.forEach((col) => {
|
||
if (col.entityDisplayConfig) {
|
||
const sourceColumn = col.entityJoinInfo!.sourceColumn;
|
||
screenEntityConfigs[sourceColumn] = {
|
||
displayColumns: col.entityDisplayConfig.displayColumns,
|
||
separator: col.entityDisplayConfig.separator || " - ",
|
||
};
|
||
}
|
||
});
|
||
|
||
console.log("🔗 Entity 조인 컬럼:", entityJoinColumns);
|
||
console.log("🔗 조인 탭 컬럼:", joinTabColumns);
|
||
console.log("🔗 추가 Entity 조인 컬럼:", additionalJoinColumns);
|
||
console.log("🎯 화면별 엔티티 설정:", screenEntityConfigs);
|
||
|
||
const result = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, {
|
||
page: currentPage,
|
||
size: localPageSize,
|
||
search: (() => {
|
||
// 고급 필터 값이 있으면 우선 사용
|
||
const hasAdvancedFilters = Object.values(searchValues).some((value) => {
|
||
if (typeof value === "string") return value.trim() !== "";
|
||
if (typeof value === "object" && value !== null) {
|
||
return Object.values(value).some((v) => v !== "" && v !== null && v !== undefined);
|
||
}
|
||
return value !== null && value !== undefined && value !== "";
|
||
});
|
||
|
||
if (hasAdvancedFilters) {
|
||
console.log("🔍 고급 검색 필터 사용:", searchValues);
|
||
console.log("🔍 고급 검색 필터 상세:", JSON.stringify(searchValues, null, 2));
|
||
return searchValues;
|
||
}
|
||
|
||
// 고급 필터가 없으면 기존 단순 검색 사용
|
||
if (searchTerm?.trim()) {
|
||
// 스마트한 단일 컬럼 선택 로직 (서버가 OR 검색을 지원하지 않음)
|
||
let searchColumn = 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]: searchTerm });
|
||
return { [searchColumn]: searchTerm };
|
||
}
|
||
|
||
return undefined;
|
||
})(),
|
||
sortBy: sortColumn || undefined,
|
||
sortOrder: sortDirection,
|
||
enableEntityJoin: true, // 🎯 Entity 조인 활성화
|
||
additionalJoinColumns: additionalJoinColumns.length > 0 ? additionalJoinColumns : undefined, // 추가 조인 컬럼
|
||
screenEntityConfigs: Object.keys(screenEntityConfigs).length > 0 ? screenEntityConfigs : undefined, // 🎯 화면별 엔티티 설정
|
||
});
|
||
|
||
if (result) {
|
||
console.log("🎯 API 응답 결과:", result);
|
||
console.log("🎯 데이터 개수:", result.data?.length || 0);
|
||
console.log("🎯 전체 페이지:", result.totalPages);
|
||
console.log("🎯 총 아이템:", result.total);
|
||
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 categoryList = codeColumns.map(([, meta]) => meta.codeCategory).filter(Boolean) as string[];
|
||
|
||
try {
|
||
await codeCache.preloadCodes(categoryList);
|
||
console.log("📋 모든 코드 캐시 로드 완료 (전역 캐시)");
|
||
} catch (error) {
|
||
console.error("❌ 코드 캐시 로드 중 오류:", error);
|
||
}
|
||
}
|
||
|
||
// 🎯 Entity 조인된 컬럼 처리 - 사용자가 설정한 컬럼들만 사용
|
||
let processedColumns = [...(tableConfig.columns || [])];
|
||
|
||
// 초기 컬럼이 있으면 먼저 설정
|
||
if (processedColumns.length > 0) {
|
||
console.log(
|
||
"🔍 사용자 설정 컬럼들:",
|
||
processedColumns.map((c) => c.columnName),
|
||
);
|
||
|
||
// 🎯 API 응답과 비교하여 존재하지 않는 컬럼 필터링
|
||
if (result.data.length > 0) {
|
||
const actualApiColumns = Object.keys(result.data[0]);
|
||
console.log("🔍 API 응답의 실제 컬럼들:", actualApiColumns);
|
||
|
||
// 🎯 조인 컬럼 매핑 테이블 (사용자 설정 → API 응답)
|
||
// 실제 API 응답에 존재하는 컬럼만 매핑
|
||
const newJoinColumnMapping: Record<string, string> = {
|
||
dept_code_dept_code: "dept_code", // user_info.dept_code
|
||
dept_code_status: "status", // user_info.status (dept_info.status가 조인되지 않음)
|
||
dept_code_company_name: "dept_name", // dept_info.dept_name (company_name이 조인되지 않음)
|
||
dept_code_name: "dept_code_name", // dept_info.dept_name
|
||
dept_name: "dept_name", // dept_info.dept_name
|
||
status: "status", // user_info.status
|
||
};
|
||
|
||
// 🎯 조인 컬럼 매핑 상태 업데이트
|
||
setJoinColumnMapping(newJoinColumnMapping);
|
||
|
||
console.log("🔍 조인 컬럼 매핑 테이블:", newJoinColumnMapping);
|
||
console.log("🔍 실제 API 응답 컬럼들:", actualApiColumns);
|
||
|
||
// 🎯 컬럼명 매핑 및 유효성 검사
|
||
const validColumns = processedColumns
|
||
.map((col) => {
|
||
// 체크박스는 그대로 유지
|
||
if (col.columnName === "__checkbox__") return col;
|
||
|
||
// 조인 컬럼 매핑 적용
|
||
const mappedColumnName = newJoinColumnMapping[col.columnName] || col.columnName;
|
||
|
||
console.log(`🔍 컬럼 매핑 처리: ${col.columnName} → ${mappedColumnName}`);
|
||
|
||
// API 응답에 존재하는지 확인
|
||
const existsInApi = actualApiColumns.includes(mappedColumnName);
|
||
|
||
if (!existsInApi) {
|
||
console.log(`🔍 제거될 컬럼: ${col.columnName} → ${mappedColumnName} (API에 존재하지 않음)`);
|
||
return null;
|
||
}
|
||
|
||
// 컬럼명이 변경된 경우 업데이트
|
||
if (mappedColumnName !== col.columnName) {
|
||
console.log(`🔄 컬럼명 매핑: ${col.columnName} → ${mappedColumnName}`);
|
||
return {
|
||
...col,
|
||
columnName: mappedColumnName,
|
||
};
|
||
}
|
||
|
||
console.log(`✅ 컬럼 유지: ${col.columnName}`);
|
||
return col;
|
||
})
|
||
.filter((col) => col !== null) as ColumnConfig[];
|
||
|
||
if (validColumns.length !== processedColumns.length) {
|
||
console.log(
|
||
"🔍 필터링된 컬럼들:",
|
||
validColumns.map((c) => c.columnName),
|
||
);
|
||
console.log(
|
||
"🔍 제거된 컬럼들:",
|
||
processedColumns
|
||
.filter((col) => {
|
||
const mappedName = newJoinColumnMapping[col.columnName] || col.columnName;
|
||
return !actualApiColumns.includes(mappedName) && col.columnName !== "__checkbox__";
|
||
})
|
||
.map((c) => c.columnName),
|
||
);
|
||
processedColumns = validColumns;
|
||
}
|
||
}
|
||
}
|
||
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}"`,
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 🎯 컬럼 설정이 없으면 API 응답 기반으로 생성
|
||
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,
|
||
}));
|
||
|
||
console.log(
|
||
"🎯 자동 생성된 컬럼들:",
|
||
autoColumns.map((c) => c.columnName),
|
||
);
|
||
|
||
// 컴포넌트 설정 업데이트 (부모 컴포넌트에 알림)
|
||
if (onFormDataChange) {
|
||
onFormDataChange({
|
||
...component,
|
||
config: {
|
||
...tableConfig,
|
||
columns: autoColumns,
|
||
},
|
||
});
|
||
}
|
||
processedColumns = autoColumns;
|
||
}
|
||
|
||
// 🎯 표시할 컬럼 상태 업데이트
|
||
setDisplayColumns(processedColumns);
|
||
console.log("🎯 displayColumns 업데이트됨:", processedColumns);
|
||
console.log("🎯 데이터 개수:", result.data?.length || 0);
|
||
console.log("🎯 전체 데이터:", result.data);
|
||
}
|
||
} catch (err) {
|
||
console.error("테이블 데이터 로딩 오류:", err);
|
||
setError(err instanceof Error ? err.message : "데이터를 불러오는 중 오류가 발생했습니다.");
|
||
setData([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 페이지 변경
|
||
const handlePageChange = (newPage: number) => {
|
||
setCurrentPage(newPage);
|
||
|
||
// 상세설정에 현재 페이지 정보 알림 (필요한 경우)
|
||
if (onConfigChange && tableConfig.pagination) {
|
||
console.log("📤 테이블에서 페이지 변경을 상세설정에 알림:", newPage);
|
||
onConfigChange({
|
||
...tableConfig,
|
||
pagination: {
|
||
...tableConfig.pagination,
|
||
currentPage: newPage, // 현재 페이지 정보 추가
|
||
},
|
||
});
|
||
} else if (!onConfigChange) {
|
||
console.warn("⚠️ onConfigChange가 정의되지 않음 - 페이지 변경 상세설정과 연동 불가");
|
||
}
|
||
};
|
||
|
||
// 정렬 변경
|
||
const handleSort = (column: string) => {
|
||
if (sortColumn === column) {
|
||
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
||
} else {
|
||
setSortColumn(column);
|
||
setSortDirection("asc");
|
||
}
|
||
};
|
||
|
||
// 고급 필터 핸들러
|
||
const handleSearchValueChange = (columnName: string, value: any) => {
|
||
setSearchValues((prev) => ({
|
||
...prev,
|
||
[columnName]: value,
|
||
}));
|
||
};
|
||
|
||
const handleAdvancedSearch = () => {
|
||
setCurrentPage(1);
|
||
fetchTableData();
|
||
};
|
||
|
||
const handleClearAdvancedFilters = () => {
|
||
setSearchValues({});
|
||
setCurrentPage(1);
|
||
fetchTableData();
|
||
};
|
||
|
||
// 새로고침
|
||
const handleRefresh = () => {
|
||
fetchTableData();
|
||
};
|
||
|
||
// 체크박스 핸들러들
|
||
const getRowKey = (row: any, index: number) => {
|
||
// 기본키가 있으면 사용, 없으면 인덱스 사용
|
||
return row.id || row.objid || row.pk || index.toString();
|
||
};
|
||
|
||
const handleRowSelection = (rowKey: string, checked: boolean) => {
|
||
const newSelectedRows = new Set(selectedRows);
|
||
if (checked) {
|
||
newSelectedRows.add(rowKey);
|
||
} else {
|
||
newSelectedRows.delete(rowKey);
|
||
}
|
||
setSelectedRows(newSelectedRows);
|
||
setIsAllSelected(newSelectedRows.size === data.length && data.length > 0);
|
||
|
||
// 선택된 실제 데이터를 상위 컴포넌트로 전달
|
||
const selectedKeys = Array.from(newSelectedRows);
|
||
const selectedData = selectedKeys
|
||
.map((key) => {
|
||
// rowKey를 사용하여 데이터 찾기 (ID 기반 또는 인덱스 기반)
|
||
return data.find((row, index) => {
|
||
const currentRowKey = getRowKey(row, index);
|
||
return currentRowKey === key;
|
||
});
|
||
})
|
||
.filter(Boolean);
|
||
|
||
console.log("🔍 handleRowSelection 디버그:", {
|
||
rowKey,
|
||
checked,
|
||
selectedKeys,
|
||
selectedData,
|
||
dataCount: data.length,
|
||
});
|
||
|
||
onSelectedRowsChange?.(selectedKeys, selectedData);
|
||
|
||
if (tableConfig.onSelectionChange) {
|
||
tableConfig.onSelectionChange(selectedData);
|
||
}
|
||
};
|
||
|
||
const handleSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
const allKeys = data.map((row, index) => getRowKey(row, index));
|
||
setSelectedRows(new Set(allKeys));
|
||
setIsAllSelected(true);
|
||
|
||
// 선택된 실제 데이터를 상위 컴포넌트로 전달
|
||
onSelectedRowsChange?.(allKeys, data);
|
||
|
||
if (tableConfig.onSelectionChange) {
|
||
tableConfig.onSelectionChange(data);
|
||
}
|
||
} else {
|
||
setSelectedRows(new Set());
|
||
setIsAllSelected(false);
|
||
|
||
// 빈 선택을 상위 컴포넌트로 전달
|
||
onSelectedRowsChange?.([], []);
|
||
|
||
if (tableConfig.onSelectionChange) {
|
||
tableConfig.onSelectionChange([]);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 효과
|
||
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,
|
||
searchValues,
|
||
]);
|
||
|
||
// refreshKey 변경 시 테이블 데이터 새로고침
|
||
useEffect(() => {
|
||
if (refreshKey && refreshKey > 0 && !isDesignMode) {
|
||
console.log("🔄 refreshKey 변경 감지, 테이블 데이터 새로고침:", refreshKey);
|
||
// 선택된 행 상태 초기화
|
||
setSelectedRows(new Set());
|
||
setIsAllSelected(false);
|
||
// 부모 컴포넌트에 빈 선택 상태 전달
|
||
console.log("🔄 선택 상태 초기화 - 빈 배열 전달");
|
||
onSelectedRowsChange?.([], []);
|
||
// 테이블 데이터 새로고침
|
||
fetchTableData();
|
||
}
|
||
}, [refreshKey]);
|
||
|
||
// 상세설정에서 페이지네이션 설정 변경 시 로컬 상태 동기화
|
||
useEffect(() => {
|
||
// 페이지 크기 동기화
|
||
if (tableConfig.pagination?.pageSize && tableConfig.pagination.pageSize !== localPageSize) {
|
||
console.log("🔄 상세설정에서 페이지 크기 변경 감지:", tableConfig.pagination.pageSize);
|
||
setLocalPageSize(tableConfig.pagination.pageSize);
|
||
setCurrentPage(1); // 페이지를 1로 리셋
|
||
}
|
||
|
||
// 현재 페이지 동기화 (상세설정에서 페이지를 직접 변경한 경우)
|
||
if (tableConfig.pagination?.currentPage && tableConfig.pagination.currentPage !== currentPage) {
|
||
console.log("🔄 상세설정에서 현재 페이지 변경 감지:", tableConfig.pagination.currentPage);
|
||
setCurrentPage(tableConfig.pagination.currentPage);
|
||
}
|
||
}, [tableConfig.pagination?.pageSize, tableConfig.pagination?.currentPage]);
|
||
|
||
// 표시할 컬럼 계산 (Entity 조인 적용됨 + 체크박스 컬럼 추가 + 숨김 기능)
|
||
const visibleColumns = useMemo(() => {
|
||
// 기본값 처리: checkbox 설정이 없으면 기본값 사용
|
||
const checkboxConfig = tableConfig.checkbox || {
|
||
enabled: true,
|
||
multiple: true,
|
||
position: "left",
|
||
selectAll: true,
|
||
};
|
||
|
||
let columns: ColumnConfig[] = [];
|
||
|
||
// displayColumns가 있으면 우선 사용 (Entity 조인 적용된 컬럼들)
|
||
if (displayColumns && displayColumns.length > 0) {
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
const filteredColumns = displayColumns.filter((col) => {
|
||
// 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
|
||
if (isDesignMode) {
|
||
return col.visible; // 디자인 모드에서는 visible만 체크
|
||
} else {
|
||
return col.visible && !col.hidden; // 실제 화면에서는 visible이면서 hidden이 아닌 것만
|
||
}
|
||
});
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
columns = filteredColumns.sort((a, b) => a.order - b.order);
|
||
} else if (tableConfig.columns && tableConfig.columns.length > 0) {
|
||
// displayColumns가 없으면 기본 컬럼 사용
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
columns = tableConfig.columns
|
||
.filter((col) => {
|
||
// 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
|
||
if (isDesignMode) {
|
||
return col.visible; // 디자인 모드에서는 visible만 체크
|
||
} else {
|
||
return col.visible && !col.hidden; // 실제 화면에서는 visible이면서 hidden이 아닌 것만
|
||
}
|
||
})
|
||
.sort((a, b) => a.order - b.order);
|
||
} else {
|
||
console.log("🎯 사용할 컬럼이 없음");
|
||
return [];
|
||
}
|
||
|
||
// 체크박스가 활성화되고 실제 데이터 컬럼이 있는 경우에만 체크박스 컬럼을 추가
|
||
if (checkboxConfig.enabled && columns.length > 0) {
|
||
const checkboxColumn: ColumnConfig = {
|
||
columnName: "__checkbox__",
|
||
displayName: "",
|
||
visible: true,
|
||
sortable: false,
|
||
searchable: false,
|
||
width: 50,
|
||
align: "center",
|
||
order: -1, // 가장 앞에 위치
|
||
fixed: checkboxConfig.position === "left" ? "left" : false,
|
||
fixedOrder: 0, // 가장 앞에 고정
|
||
};
|
||
|
||
// 체크박스 위치에 따라 추가
|
||
if (checkboxConfig.position === "left") {
|
||
columns.unshift(checkboxColumn);
|
||
} else {
|
||
columns.push(checkboxColumn);
|
||
}
|
||
}
|
||
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
return columns;
|
||
}, [displayColumns, tableConfig.columns, tableConfig.checkbox, isDesignMode]);
|
||
|
||
// columnsByPosition은 SingleTableWithSticky에서 사용하지 않으므로 제거
|
||
// 기존 테이블에서만 필요한 경우 다시 추가 가능
|
||
|
||
// 가로 스크롤이 필요한지 계산
|
||
const needsHorizontalScroll = useMemo(() => {
|
||
if (!tableConfig.horizontalScroll?.enabled) {
|
||
console.log("🚫 가로 스크롤 비활성화됨");
|
||
return false;
|
||
}
|
||
|
||
const maxVisible = tableConfig.horizontalScroll.maxVisibleColumns || 8;
|
||
const totalColumns = visibleColumns.length;
|
||
const result = totalColumns > maxVisible;
|
||
|
||
console.log(
|
||
`🔍 가로 스크롤 계산: ${totalColumns}개 컬럼 > ${maxVisible}개 최대 = ${result ? "스크롤 필요" : "스크롤 불필요"}`,
|
||
);
|
||
console.log("📊 가로 스크롤 설정:", tableConfig.horizontalScroll);
|
||
console.log(
|
||
"📋 현재 컬럼들:",
|
||
visibleColumns.map((c) => c.columnName),
|
||
);
|
||
|
||
return result;
|
||
}, [visibleColumns.length, tableConfig.horizontalScroll]);
|
||
|
||
// 컬럼 너비 계산 - 내용 길이에 맞게 자동 조정
|
||
const getColumnWidth = (column: ColumnConfig) => {
|
||
if (column.width) return column.width;
|
||
|
||
// 체크박스 컬럼인 경우 고정 너비
|
||
if (column.columnName === "__checkbox__") {
|
||
return 50;
|
||
}
|
||
|
||
// 컬럼 헤더 텍스트 길이 기반으로 계산
|
||
const headerText = columnLabels[column.columnName] || column.displayName || column.columnName;
|
||
const headerLength = headerText.length;
|
||
|
||
// 데이터 셀의 최대 길이 추정 (실제 데이터가 있다면 더 정확하게 계산 가능)
|
||
const estimatedContentLength = Math.max(headerLength, 10); // 최소 10자
|
||
|
||
// 문자당 약 8px 정도로 계산하고, 패딩 및 여백 고려
|
||
const calculatedWidth = estimatedContentLength * 8 + 40; // 40px는 패딩과 여백
|
||
|
||
// 최소 너비만 보장하고, 최대 너비 제한은 제거
|
||
const minWidth = 80;
|
||
|
||
return Math.max(minWidth, calculatedWidth);
|
||
};
|
||
|
||
// 체크박스 헤더 렌더링
|
||
const renderCheckboxHeader = () => {
|
||
// 기본값 처리: checkbox 설정이 없으면 기본값 사용
|
||
const checkboxConfig = tableConfig.checkbox || {
|
||
enabled: true,
|
||
multiple: true,
|
||
position: "left",
|
||
selectAll: true,
|
||
};
|
||
|
||
if (!checkboxConfig.enabled || !checkboxConfig.selectAll) {
|
||
return null;
|
||
}
|
||
|
||
return <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" style={{ zIndex: 1 }} />;
|
||
};
|
||
|
||
// 체크박스 셀 렌더링
|
||
const renderCheckboxCell = (row: any, index: number) => {
|
||
// 기본값 처리: checkbox 설정이 없으면 기본값 사용
|
||
const checkboxConfig = tableConfig.checkbox || {
|
||
enabled: true,
|
||
multiple: true,
|
||
position: "left",
|
||
selectAll: true,
|
||
};
|
||
|
||
if (!checkboxConfig.enabled) {
|
||
return null;
|
||
}
|
||
|
||
const rowKey = getRowKey(row, index);
|
||
const isSelected = selectedRows.has(rowKey);
|
||
|
||
return (
|
||
<Checkbox
|
||
checked={isSelected}
|
||
onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
|
||
aria-label={`행 ${index + 1} 선택`}
|
||
style={{ zIndex: 1 }}
|
||
/>
|
||
);
|
||
};
|
||
|
||
// 🎯 값 포맷팅 (전역 코드 캐시 사용)
|
||
const formatCellValue = useMemo(() => {
|
||
return (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 = optimizedConvertCode(categoryCode, String(value));
|
||
|
||
// 코드 변환 로그 제거 (성능상 이유로)
|
||
|
||
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);
|
||
}
|
||
};
|
||
}, [columnMeta, optimizedConvertCode]); // 최적화된 변환 함수 의존성 추가
|
||
|
||
// 이벤트 핸들러
|
||
const handleClick = (e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
onClick?.();
|
||
};
|
||
|
||
// 행 클릭 핸들러
|
||
const handleRowClick = (row: any) => {
|
||
if (tableConfig.onRowClick) {
|
||
tableConfig.onRowClick(row);
|
||
}
|
||
};
|
||
|
||
// 드래그 핸들러 (그리드 스냅 지원)
|
||
const handleRowDragStart = (e: React.DragEvent, row: any, index: number) => {
|
||
setIsDragging(true);
|
||
setDraggedRowIndex(index);
|
||
|
||
// 드래그 데이터에 그리드 정보 포함
|
||
const dragData = {
|
||
...row,
|
||
_dragType: 'table-row',
|
||
_gridSize: { width: 4, height: 1 }, // 기본 그리드 크기 (4칸 너비, 1칸 높이)
|
||
_snapToGrid: true
|
||
};
|
||
|
||
e.dataTransfer.setData('application/json', JSON.stringify(dragData));
|
||
e.dataTransfer.effectAllowed = 'copy'; // move 대신 copy로 변경
|
||
|
||
// 드래그 이미지를 더 깔끔하게
|
||
const dragElement = e.currentTarget as HTMLElement;
|
||
|
||
// 커스텀 드래그 이미지 생성 (저장 버튼과 어울리는 스타일)
|
||
const dragImage = document.createElement('div');
|
||
dragImage.style.position = 'absolute';
|
||
dragImage.style.top = '-1000px';
|
||
dragImage.style.left = '-1000px';
|
||
dragImage.style.background = 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)';
|
||
dragImage.style.color = 'white';
|
||
dragImage.style.padding = '12px 16px';
|
||
dragImage.style.borderRadius = '8px';
|
||
dragImage.style.fontSize = '14px';
|
||
dragImage.style.fontWeight = '600';
|
||
dragImage.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.4)';
|
||
dragImage.style.display = 'flex';
|
||
dragImage.style.alignItems = 'center';
|
||
dragImage.style.gap = '8px';
|
||
dragImage.style.minWidth = '200px';
|
||
dragImage.style.whiteSpace = 'nowrap';
|
||
|
||
// 아이콘과 텍스트 추가
|
||
const firstValue = Object.values(row)[0] || 'Row';
|
||
dragImage.innerHTML = `
|
||
<div style="
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
">📋</div>
|
||
<span>${firstValue}</span>
|
||
<div style="
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
">4×1</div>
|
||
`;
|
||
|
||
document.body.appendChild(dragImage);
|
||
e.dataTransfer.setDragImage(dragImage, 20, 20);
|
||
|
||
// 정리
|
||
setTimeout(() => {
|
||
if (document.body.contains(dragImage)) {
|
||
document.body.removeChild(dragImage);
|
||
}
|
||
}, 0);
|
||
};
|
||
|
||
const handleRowDragEnd = (e: React.DragEvent) => {
|
||
setIsDragging(false);
|
||
setDraggedRowIndex(null);
|
||
};
|
||
|
||
// 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-2xl border-2 border-dashed border-blue-200 bg-gradient-to-br from-blue-50/30 to-indigo-50/20">
|
||
<div className="text-center p-8">
|
||
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center shadow-sm">
|
||
<TableIcon className="h-8 w-8 text-blue-600" />
|
||
</div>
|
||
<div className="text-lg font-semibold text-slate-700 mb-2">테이블 리스트</div>
|
||
<div className="text-sm text-slate-500 bg-white/60 px-4 py-2 rounded-full">
|
||
설정 패널에서 테이블을 선택해주세요
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{...componentStyle, zIndex: 10}} // 🎯 componentStyle + z-index 추가
|
||
className={cn(
|
||
"rounded-lg bg-white border border-gray-200 shadow-md shadow-blue-100/50",
|
||
"overflow-hidden relative", // 🎯 항상 overflow-hidden 적용 + relative 추가
|
||
className
|
||
)}
|
||
{...domProps}
|
||
>
|
||
{/* 헤더 */}
|
||
{tableConfig.showHeader && (
|
||
<div
|
||
className="flex items-center justify-between bg-gray-100/80 border-b border-gray-200 px-6 py-4"
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: "100%",
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<div className="flex items-center space-x-4">
|
||
{(tableConfig.title || tableLabel) && (
|
||
<h3 className="text-lg font-semibold text-gray-900">
|
||
{tableConfig.title || tableLabel}
|
||
</h3>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-3">
|
||
{/* 선택된 항목 정보 표시 */}
|
||
{selectedRows.size > 0 && (
|
||
<div className="flex items-center space-x-2 bg-blue-50 px-3 py-1 rounded-md">
|
||
<span className="text-sm font-medium text-blue-700">{selectedRows.size}개 선택됨</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 새로고침 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleRefresh}
|
||
disabled={loading}
|
||
style={buttonStyle}
|
||
className="group relative shadow-sm rounded-lg [&:hover]:opacity-90"
|
||
>
|
||
<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 bg-blue-200/30 rounded-full animate-pulse"></div>
|
||
)}
|
||
</div>
|
||
<span className="text-sm font-medium" style={{ color: buttonTextColor }}>
|
||
{loading ? "새로고침 중..." : "새로고침"}
|
||
</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 고급 검색 필터 - 항상 표시 (컬럼 정보 기반 자동 생성) */}
|
||
{tableConfig.filter?.enabled && visibleColumns && visibleColumns.length > 0 && (
|
||
<>
|
||
<div className="h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent"></div>
|
||
<div className="bg-white p-4">
|
||
<AdvancedSearchFilters
|
||
filters={tableConfig.filter?.filters || []} // 설정된 필터 사용, 없으면 자동 생성
|
||
searchValues={searchValues}
|
||
onSearchValueChange={handleSearchValueChange}
|
||
onSearch={handleAdvancedSearch}
|
||
onClearFilters={handleClearAdvancedFilters}
|
||
tableColumns={visibleColumns.map((col) => ({
|
||
columnName: col.columnName,
|
||
widgetType: (columnMeta[col.columnName]?.webType || "text") as WebType,
|
||
displayName: columnLabels[col.columnName] || col.displayName || col.columnName,
|
||
codeCategory: columnMeta[col.columnName]?.codeCategory,
|
||
isVisible: col.visible,
|
||
// 추가 메타데이터 전달 (필터 자동 생성용)
|
||
web_type: (columnMeta[col.columnName]?.webType || "text") as WebType,
|
||
column_name: col.columnName,
|
||
column_label: columnLabels[col.columnName] || col.displayName || col.columnName,
|
||
code_category: columnMeta[col.columnName]?.codeCategory,
|
||
}))}
|
||
tableName={tableConfig.selectedTable}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* 테이블 컨텐츠 */}
|
||
<div
|
||
className={`w-full overflow-hidden ${localPageSize >= 50 ? "flex-1" : ""}`}
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: "100%",
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
{loading ? (
|
||
<div className="flex h-full items-center justify-center bg-gradient-to-br from-slate-50/50 to-blue-50/30">
|
||
<div className="text-center p-8">
|
||
<div className="relative">
|
||
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center">
|
||
<RefreshCw className="h-8 w-8 animate-spin text-blue-600" />
|
||
</div>
|
||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full animate-pulse"></div>
|
||
</div>
|
||
<div className="text-sm font-medium text-slate-700">데이터를 불러오는 중...</div>
|
||
<div className="text-xs text-slate-500 mt-1">잠시만 기다려주세요</div>
|
||
</div>
|
||
</div>
|
||
) : error ? (
|
||
<div className="flex h-full items-center justify-center bg-gradient-to-br from-red-50/50 to-orange-50/30">
|
||
<div className="text-center p-8">
|
||
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-red-100 to-orange-100 rounded-2xl flex items-center justify-center">
|
||
<div className="w-8 h-8 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center">
|
||
<span className="text-white text-sm font-bold">!</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-sm font-medium text-red-700">오류가 발생했습니다</div>
|
||
<div className="mt-1 text-xs text-red-500 bg-red-50 px-3 py-1 rounded-full">{error}</div>
|
||
</div>
|
||
</div>
|
||
) : needsHorizontalScroll ? (
|
||
// 가로 스크롤이 필요한 경우 - 단일 테이블에서 sticky 컬럼 사용
|
||
<div className="w-full overflow-hidden">
|
||
<SingleTableWithSticky
|
||
visibleColumns={visibleColumns}
|
||
data={data}
|
||
columnLabels={columnLabels}
|
||
sortColumn={sortColumn}
|
||
sortDirection={sortDirection}
|
||
tableConfig={tableConfig}
|
||
isDesignMode={isDesignMode}
|
||
isAllSelected={isAllSelected}
|
||
handleSort={handleSort}
|
||
handleSelectAll={handleSelectAll}
|
||
handleRowClick={handleRowClick}
|
||
renderCheckboxCell={renderCheckboxCell}
|
||
formatCellValue={formatCellValue}
|
||
getColumnWidth={getColumnWidth}
|
||
containerWidth={calculatedWidth}
|
||
/>
|
||
</div>
|
||
) : (
|
||
// 기존 테이블 (가로 스크롤이 필요 없는 경우)
|
||
<div className="w-full overflow-hidden">
|
||
<Table
|
||
className="w-full"
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: "100%",
|
||
tableLayout: "fixed" // 테이블 크기 고정
|
||
}}
|
||
>
|
||
<TableHeader className={cn(
|
||
tableConfig.stickyHeader ? "sticky top-0 z-20" : "",
|
||
"bg-gray-100/80 border-b border-gray-200"
|
||
)}>
|
||
<TableRow
|
||
style={{
|
||
minHeight: "48px !important",
|
||
height: "48px !important",
|
||
lineHeight: "1",
|
||
width: "100%",
|
||
maxWidth: "100%"
|
||
}}
|
||
className="border-none"
|
||
>
|
||
{visibleColumns.map((column, colIndex) => (
|
||
<TableHead
|
||
key={column.columnName}
|
||
style={{
|
||
width: column.width ? `${column.width}px` : undefined,
|
||
minHeight: "48px !important",
|
||
height: "48px !important",
|
||
verticalAlign: "middle",
|
||
lineHeight: "1",
|
||
boxSizing: "border-box",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
}}
|
||
className={cn(
|
||
"h-12 align-middle px-4 py-3 text-sm font-semibold text-gray-800",
|
||
column.columnName === "__checkbox__"
|
||
? "text-center"
|
||
: "cursor-pointer whitespace-nowrap select-none",
|
||
`text-${column.align}`,
|
||
column.sortable && "hover:bg-orange-100 transition-colors duration-150"
|
||
)}
|
||
onClick={() => column.sortable && handleSort(column.columnName)}
|
||
>
|
||
{column.columnName === "__checkbox__" ? (
|
||
renderCheckboxHeader()
|
||
) : (
|
||
<div className="flex items-center space-x-2">
|
||
<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 text-blue-600" />
|
||
) : (
|
||
<ArrowDown className="h-3 w-3 text-blue-600" />
|
||
)
|
||
) : (
|
||
<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-12 text-center">
|
||
<div className="flex flex-col items-center space-y-3">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-slate-100 to-slate-200 rounded-2xl flex items-center justify-center">
|
||
<TableIcon className="h-6 w-6 text-slate-400" />
|
||
</div>
|
||
<div className="text-sm font-medium text-slate-600">데이터가 없습니다</div>
|
||
<div className="text-xs text-slate-400">조건을 변경하거나 새로운 데이터를 추가해보세요</div>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
data.map((row, index) => (
|
||
<TableRow
|
||
key={index}
|
||
draggable={!isDesignMode}
|
||
onDragStart={(e) => handleRowDragStart(e, row, index)}
|
||
onDragEnd={handleRowDragEnd}
|
||
className={cn(
|
||
"group relative h-12 cursor-pointer transition-all duration-200 border-b border-gray-100",
|
||
// 기본 스타일
|
||
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",
|
||
// 드래그 상태 스타일 (미묘하게)
|
||
draggedRowIndex === index && "bg-gradient-to-r from-blue-50 to-blue-100/40 shadow-sm border-blue-200",
|
||
isDragging && draggedRowIndex !== index && "opacity-70",
|
||
// 드래그 가능 표시
|
||
!isDesignMode && "hover:cursor-grab active:cursor-grabbing"
|
||
)}
|
||
style={{
|
||
minHeight: "48px",
|
||
height: "48px",
|
||
lineHeight: "1",
|
||
width: "100%",
|
||
maxWidth: "100%"
|
||
}}
|
||
onClick={() => handleRowClick(row)}
|
||
>
|
||
{visibleColumns.map((column, colIndex) => (
|
||
<TableCell
|
||
key={column.columnName}
|
||
className={cn(
|
||
"h-12 align-middle px-4 py-3 text-sm transition-all duration-200",
|
||
`text-${column.align}`
|
||
)}
|
||
style={{
|
||
minHeight: "48px",
|
||
height: "48px",
|
||
verticalAlign: "middle",
|
||
width: column.width ? `${column.width}px` : undefined,
|
||
boxSizing: "border-box",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap"
|
||
}}
|
||
>
|
||
{column.columnName === "__checkbox__"
|
||
? renderCheckboxCell(row, index)
|
||
: (() => {
|
||
// 🎯 매핑된 컬럼명으로 데이터 찾기
|
||
const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
|
||
const cellValue = row[mappedColumnName];
|
||
if (index === 0) {
|
||
// 디버깅 로그 제거 (성능상 이유로)
|
||
}
|
||
const formattedValue = formatCellValue(cellValue, column.format, column.columnName) || "\u00A0";
|
||
|
||
// 첫 번째 컬럼에 드래그 핸들과 아바타 추가
|
||
const isFirstColumn = colIndex === (visibleColumns[0]?.columnName === "__checkbox__" ? 1 : 0);
|
||
|
||
return (
|
||
<div className="flex items-center space-x-2">
|
||
{isFirstColumn && !isDesignMode && (
|
||
<div className="opacity-60 cursor-grab active:cursor-grabbing mr-1">
|
||
{/* 그리드 스냅 가이드 아이콘 */}
|
||
<div className="flex space-x-0.5">
|
||
<div className="flex flex-col space-y-0.5">
|
||
<div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
|
||
<div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
|
||
</div>
|
||
<div className="flex flex-col space-y-0.5">
|
||
<div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
|
||
<div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<span className="font-medium text-gray-700">
|
||
{formattedValue}
|
||
</span>
|
||
</div>
|
||
);
|
||
})()}
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 푸터/페이지네이션 */}
|
||
{tableConfig.showFooter && tableConfig.pagination?.enabled && (
|
||
<div
|
||
className="flex flex-col items-center justify-center bg-gray-100/80 border-t border-gray-200 p-6 space-y-4"
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: "100%",
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
{/* 페이지 정보 - 가운데 정렬 */}
|
||
{tableConfig.pagination?.showPageInfo && (
|
||
<div className="flex items-center justify-center space-x-2 text-sm text-slate-600">
|
||
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||
<span className="font-medium">
|
||
전체 <span className="text-blue-600 font-semibold">{totalItems.toLocaleString()}</span>건 중{" "}
|
||
<span className="text-slate-800 font-semibold">
|
||
{(currentPage - 1) * localPageSize + 1}-{Math.min(currentPage * localPageSize, totalItems)}
|
||
</span>{" "}
|
||
표시
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 페이지 크기 선택과 페이지네이션 버튼 - 가운데 정렬 */}
|
||
<div className="flex items-center justify-center space-x-4">
|
||
{/* 페이지 크기 선택 - 임시로 항상 표시 (테스트용) */}
|
||
{true && (
|
||
<select
|
||
value={localPageSize}
|
||
onChange={(e) => {
|
||
console.log("🚀 페이지 크기 드롭다운 변경 감지:", e.target.value);
|
||
const newPageSize = parseInt(e.target.value);
|
||
|
||
console.log("🎯 페이지 크기 변경 이벤트:", {
|
||
from: localPageSize,
|
||
to: newPageSize,
|
||
hasOnConfigChange: !!onConfigChange,
|
||
onConfigChangeType: typeof onConfigChange
|
||
});
|
||
|
||
// 로컬 상태 업데이트
|
||
setLocalPageSize(newPageSize);
|
||
|
||
// 페이지를 1로 리셋
|
||
setCurrentPage(1);
|
||
|
||
// 상세설정에 변경사항 알림 (pagination 설정 업데이트)
|
||
if (onConfigChange) {
|
||
console.log("📤 테이블에서 페이지 크기 변경을 상세설정에 알림:", newPageSize);
|
||
onConfigChange({
|
||
...tableConfig,
|
||
pagination: {
|
||
...tableConfig.pagination,
|
||
pageSize: newPageSize,
|
||
},
|
||
});
|
||
} else {
|
||
console.warn("⚠️ onConfigChange가 정의되지 않음 - 상세설정과 연동 불가");
|
||
}
|
||
|
||
// 데이터는 useEffect에서 자동으로 다시 로드됨
|
||
}}
|
||
className="bg-white/80 border border-slate-200 rounded-lg px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-white hover:border-slate-300 transition-colors"
|
||
>
|
||
{(tableConfig.pagination?.pageSizeOptions || [10, 20, 50, 100]).map((size) => (
|
||
<option key={size} value={size}>
|
||
{size}개씩
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
|
||
{/* 페이지네이션 버튼 */}
|
||
<div className="flex items-center space-x-2 bg-white rounded-lg border border-gray-200 shadow-sm p-1">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handlePageChange(1)}
|
||
disabled={currentPage === 1}
|
||
className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
|
||
>
|
||
<ChevronsLeft className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handlePageChange(currentPage - 1)}
|
||
disabled={currentPage === 1}
|
||
className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
|
||
>
|
||
<ChevronLeft className="h-4 w-4" />
|
||
</Button>
|
||
|
||
<div className="flex items-center px-4 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-md border border-blue-100">
|
||
<span className="text-sm font-semibold text-blue-800">
|
||
{currentPage}
|
||
</span>
|
||
<span className="text-gray-400 mx-2 font-light">/</span>
|
||
<span className="text-sm font-medium text-gray-600">
|
||
{totalPages}
|
||
</span>
|
||
</div>
|
||
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handlePageChange(currentPage + 1)}
|
||
disabled={currentPage === totalPages}
|
||
className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
|
||
>
|
||
<ChevronRight className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handlePageChange(totalPages)}
|
||
disabled={currentPage === totalPages}
|
||
className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
|
||
>
|
||
<ChevronsRight className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* TableList 래퍼 컴포넌트
|
||
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
||
*/
|
||
export const TableListWrapper: React.FC<TableListComponentProps> = (props) => {
|
||
return <TableListComponent {...props} />;
|
||
};
|