테이블 헤더 고정 및 선택 시 text bold 처리

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

@@ -50,8 +50,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
         <h3 className="text-2xl font-medium text-label">{headName}</h3>
         </div> : <></>}
       <div className={`card !m-[1.2rem] !p-0r ${className}`}>
-        <Table>
-          <TableHeader>
+        <Table variant="secondary">
+          <TableHeader >
           {children ? <>{children}</> : <TableRow>
             {headlist?.map((head) => (
               <TableHead key={head.id}>{head.title}</TableHead>
@@ -64,7 +64,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
               {headlist?.map((head) => (
                 <TableCell 
                   className={`${head.align === 'right' ? 'text-right' : 'text-center'} ${
-                    cellClick && idx === index ? 'opacity-40 cursor-pointer' : 
+                    cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
                     cellClick ? 'cursor-pointer' : ''
                   }`}
                   onClick={() => handleCellClick(index, head.id)}

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

@@ -29,7 +29,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("sticky top-0 bg-secondary [&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";