From cfb91d518518ab8d0c1d60c2734b44a7104df1af Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Thu, 24 Apr 2025 11:50:57 +0900
Subject: [PATCH] firstcommit

---
 .../src/ui/table/HeadMakeColSpan.tsx          | 41 +++++++++++++++++
 .../src/ui/table/index.tsx                    | 45 +++++++++----------
 2 files changed, 63 insertions(+), 23 deletions(-)
 create mode 100644 packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx

diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
new file mode 100644
index 000000000..7fb626568
--- /dev/null
+++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
@@ -0,0 +1,41 @@
+import { TableHead, TableRow } from "@common/components/ui";
+
+interface TableUpperProps {
+  id: string;
+  title: string;
+  upName?: string;  
+  upSequnce?: number;
+  row? : number;
+  rowSpan?: number;
+  colSpan?: number;
+}
+
+const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
+  const maxRow = upHeadList.reduce((max, head) => Math.max(max, head.row || 0), 0);
+  return (
+    <>
+      {Array.from({ length: maxRow + 1 }, (_, rowIndex) => (
+        <TableRow key={rowIndex+ " headerRow"} className="bg-gray-50">
+          {upHeadList.map((head: TableUpperProps) => {
+            if (head.row === rowIndex) {
+              return (
+                <TableHead 
+                  key={head.id} 
+                  colSpan={head.colSpan || 1} 
+                  rowSpan={head.rowSpan || 1} 
+                  style={{ whiteSpace: 'pre-line' }} 
+                  className="bg-gray-50"
+                >
+                  {head.title}
+                </TableHead>
+              );
+            }
+            return null;
+          })}
+        </TableRow>
+      ))}
+    </>
+  );
+}
+
+export { HeadMakeColSpan };
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 994b9a827..f4a2230e4 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -1,6 +1,7 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 import { useEffect, useState } from "react";
 import UiPageNations from "./uiPageNations";
+import { HeadMakeColSpan } from "./HeadMakeColSpan";
 
 type UiTableProps = {
   headName: React.ReactNode | undefined;
@@ -52,30 +53,28 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
       <div className={`card !m-[1.2rem] !p-0r ${className}`}>
         <Table variant="secondary">
           <TableHeader className="font-bold">
-          {children ? <>{children}</> : <TableRow>
-            {headlist?.map((head) => (
-              <TableHead key={head.id}>{head.title}</TableHead>
+            <HeadMakeColSpan upHeadList={headlist} />
+          </TableHeader>
+          <TableBody className='text-center'>
+            {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
+              console.log(index),
+              <TableRow key={index +" "+headName}>
+                {headlist?.map((head) => (
+                  head.id&&head.id.length == 1 ? <></> :
+                  <TableCell 
+                    className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${
+                      cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
+                      cellClick ? 'cursor-pointer' : ''
+                    }`}
+                    onClick={() => handleCellClick(index, head.id)}
+                    key={head.id + index}
+                  >
+                    {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')}
+                  </TableCell>
+                ))}
+              </TableRow>
             ))}
-          </TableRow>}
-        </TableHeader>
-        <TableBody className='text-center'>
-          {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
-            <TableRow key={index + "row"}>
-              {headlist?.map((head) => (
-                <TableCell 
-                  className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${
-                    cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
-                    cellClick ? 'cursor-pointer' : ''
-                  }`}
-                  onClick={() => handleCellClick(index, head.id)}
-                  key={head.id + index}
-                >
-                  {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
+          </TableBody>
         </Table>
         {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />}
       </div>