ERP-node/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

"use client";

import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { ColumnConfig } from "./types";

interface SingleTableWithStickyProps {
  visibleColumns: ColumnConfig[];
  data: Record<string, any>[];
  columnLabels: Record<string, string>;
  sortColumn: string | null;
  sortDirection: "asc" | "desc";
  tableConfig: any;
  isDesignMode: boolean;
  isAllSelected: boolean;
  handleSort: (columnName: string) => void;
  handleSelectAll: (checked: boolean) => void;
  handleRowClick: (row: any) => void;
  renderCheckboxCell: (row: any, index: number) => React.ReactNode;
  formatCellValue: (value: any, format?: string, columnName?: string) => string;
  getColumnWidth: (column: ColumnConfig) => number;
}

export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
  visibleColumns,
  data,
  columnLabels,
  sortColumn,
  sortDirection,
  tableConfig,
  isDesignMode,
  isAllSelected,
  handleSort,
  handleSelectAll,
  handleRowClick,
  renderCheckboxCell,
  formatCellValue,
  getColumnWidth,
}) => {
  const checkboxConfig = tableConfig.checkbox || {};

  return (
    <div className="relative h-full w-full overflow-auto">
      <Table className="w-full">
        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-white" : ""}>
          <TableRow>
            {visibleColumns.map((column, colIndex) => {
              // 왼쪽 고정 컬럼들의 누적 너비 계산
              const leftFixedWidth = visibleColumns
                .slice(0, colIndex)
                .filter((col) => col.fixed === "left")
                .reduce((sum, col) => sum + getColumnWidth(col), 0);

              // 오른쪽 고정 컬럼들의 누적 너비 계산
              const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
              const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
              const rightFixedWidth =
                rightFixedIndex >= 0
                  ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
                  : 0;

              return (
                <TableHead
                  key={`sticky-header-${colIndex}-${column.columnName}`}
                  className={cn(
                    column.columnName === "__checkbox__"
                      ? "h-10 border-b px-4 py-2 text-center align-middle"
                      : "h-10 cursor-pointer border-b px-4 py-2 text-left align-middle font-medium whitespace-nowrap text-gray-900 select-none",
                    `text-${column.align}`,
                    column.sortable && "hover:bg-gray-50",
                    // 고정 컬럼 스타일
                    column.fixed === "left" && "sticky z-10 border-r bg-white shadow-sm",
                    column.fixed === "right" && "sticky z-10 border-l bg-white shadow-sm",
                    // 숨김 컬럼 스타일 (디자인 모드에서만)
                    isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
                  )}
                  style={{
                    width: getColumnWidth(column),
                    minWidth: getColumnWidth(column),
                    maxWidth: getColumnWidth(column),
                    // sticky 위치 설정
                    ...(column.fixed === "left" && { left: leftFixedWidth }),
                    ...(column.fixed === "right" && { right: rightFixedWidth }),
                  }}
                  onClick={() => column.sortable && handleSort(column.columnName)}
                >
                  <div className="flex items-center gap-2">
                    {column.columnName === "__checkbox__" ? (
                      checkboxConfig.selectAll && (
                        <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" />
                      )
                    ) : (
                      <>
                        <span className="flex-1 truncate">
                          {columnLabels[column.columnName] || column.displayName || column.columnName}
                        </span>
                        {column.sortable && (
                          <span className="ml-1">
                            {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" />
                            )}
                          </span>
                        )}
                      </>
                    )}
                  </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={`sticky-row-${index}`}
                className={cn(
                  "h-10 cursor-pointer border-b leading-none",
                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
                  tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
                )}
                style={{ minHeight: "40px", height: "40px", lineHeight: "1" }}
                onClick={() => handleRowClick(row)}
              >
                {visibleColumns.map((column, colIndex) => {
                  // 왼쪽 고정 컬럼들의 누적 너비 계산
                  const leftFixedWidth = visibleColumns
                    .slice(0, colIndex)
                    .filter((col) => col.fixed === "left")
                    .reduce((sum, col) => sum + getColumnWidth(col), 0);

                  // 오른쪽 고정 컬럼들의 누적 너비 계산
                  const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
                  const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
                  const rightFixedWidth =
                    rightFixedIndex >= 0
                      ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
                      : 0;

                  return (
                    <TableCell
                      key={`sticky-cell-${index}-${colIndex}-${column.columnName}`}
                      className={cn(
                        "h-10 px-4 py-2 align-middle text-sm whitespace-nowrap",
                        `text-${column.align}`,
                        // 고정 컬럼 스타일
                        column.fixed === "left" && "sticky z-10 border-r bg-white",
                        column.fixed === "right" && "sticky z-10 border-l bg-white",
                      )}
                      style={{
                        minHeight: "40px",
                        height: "40px",
                        verticalAlign: "middle",
                        // sticky 위치 설정
                        ...(column.fixed === "left" && { left: leftFixedWidth }),
                        ...(column.fixed === "right" && { right: rightFixedWidth }),
                      }}
                    >
                      {column.columnName === "__checkbox__"
                        ? renderCheckboxCell(row, index)
                        : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
};