boldArray의 경우 sticky 옵션 추가 (헤더밑으로 스크롤시 고정)

packages/common/business_components/src/ui/table/index.tsx

@@ -1,11 +1,10 @@
 "use client"
 
 import { Checkbox, Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { HeadMakeColSpan } from "./HeadMakeColSpan";
 import UiPageNations from "./uiPageNations";
-import { AlignVerticalDistributeCenterIcon, Check } from "lucide-react";
-import { boolean } from "zod";
+import { Check } from "lucide-react";
 
 type UiTableProps = {
   headName: React.ReactNode | undefined;
@@ -33,7 +32,8 @@ type UiHeadProps = {
 export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index = -1 }: UiTableProps) {
   const [cur, setCur] = useState<number>(1);
   const [idx, setIdx] = useState<number>(index);
-  const [isCheck, seIsCheck] = useState<boolean>(false);
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+  const headerRef = useRef<HTMLTableSectionElement>(null);
 
 
   useEffect(() => {
@@ -55,6 +55,12 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
     setIdx(-1);
   }, [tableData]);
 
+  useEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight-5);
+    }
+  }, [tableData, headlist]);
+
   const handlePageChange = (page: number) => {
     setCur(page);
     onPageChange(page);
@@ -75,11 +81,11 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
       </div> : <></>}
       <div className={`card !m-[1.2rem] !p-0r ${className}`}>
         <Table variant="secondary">
-          <TableHeader className="font-bold">
+          <TableHeader ref={headerRef} className="font-bold">
             {children ? children : <HeadMakeColSpan upHeadList={headlist} />}
           </TableHeader>
           <TableBody className='text-center'>
-            {tableData.length > 0 ? tableData?.map((el: { [key: string]: any }, index) => (
+            {tableData.length > 0 ? tableData?.map((el: Record<string, unknown>, index) => (
               <TableRow key={`row-${index}`}>
                 {headlist
                   .filter((item) => item.visible != false)
@@ -90,7 +96,8 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
                         <TableCell
                           className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
                             cellClick ? 'cursor-pointer' : ''
-                            } !font-bold`}
+                            } !font-bold sticky bg-secondary z-40`}
+                          style={{ top: `${headerHeight + (index * 39)}px` }}
                           onClick={() => handleCellClick(index, head.id)}
                           key={`cell-${head.id}-${index}`}
                         >
@@ -104,7 +111,7 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
                         <TableCell
                           className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
                             cellClick ? 'cursor-pointer' : ''
-                            }`}
+                            } mt-[${boldArray.length * 40}px]`}
                           onClick={() => handleCellClick(index, head.id)}
                           key={`cell-${head.id}-${index}`}
                         >