table colspan 기능 추가

apps/cs/src/pages/site/ui/site-page.tsx

@@ -3,8 +3,7 @@
 import "@common/assets/styles/grid.css";
 
 import { useRouter } from "next/navigation";
-import { Button, Input, DataTable } from "@common/components";
+import { Button, Input } from "@common/components";
-import { data, columns } from "../model/__mocks__";
 import { SitePageLayout } from "./layout";
 
 function SitePage() {
@@ -28,7 +27,7 @@ function SitePage() {
             <Button onClick={() => router.push("/site/register")}>등록</Button>
           </div>
           <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-            <DataTable data={data} columns={columns} />
+            {/* <DataTabledata={data} columns={columns} /> */}
           </div>
         </div>
       </div>

apps/wr/app/publicReuseFaciltyInsert/page.tsx

@@ -1,4 +1,15 @@
 import {UiTable} from '@common/business_components';
+import { TableRow } from '@common/components';
+import { TableHead } from '@common/components';
+
+
+
+interface TableUpperProps {
+  id: string;
+  title: string;
+  upName : string;
+  upSequnce: number;
+}
 
 const publicReuseFacility = [
   { 
@@ -34,6 +45,42 @@ const publicReuseFacility = [
 
 ]
 
+const publicReuseFacilityUper = [
+  { 
+    sido: "서울",
+    sigungo: "강남구",
+    facilityName: "난지",
+    location: "경기도 고양시 덕양구 대차로 4가",
+    locationgubun: "500",
+    facilityCapacity: "800,000",
+    reuse: "Y",
+    register: "Y"
+  },
+  {
+    sido: "서울",
+    sigungo: "강남구",
+    facilityName: "난지",
+    location: "경기도 고양시 덕양구 대차로 4가",
+    locationgubun: "500",
+    facilityCapacity: "800,000",
+    reuse: "Y",
+    register: "Y"
+  },
+  {
+    sido: "서울",
+    sigungo: "강남구",
+    facilityName: "난지",
+    location: "경기도 고양시 덕양구 대차로 4가",
+    locationgubun: "500",
+    facilityCapacity: "800,000",
+    yn: "Y",
+    authoDay: "2012",
+    area:"123"
+  },   
+  ]
+
+
+  
 const headList = [
                   { id: "sido", title: "시도" },
                   { id: "sigungo", title: "시군구" },
@@ -45,10 +92,41 @@ const headList = [
                   { id: "register", title: '등록여부' }];
 
 
-export default function PublicReuseFaciltyInsert() {
+
+ const upHeadList = [
+                    { id: "sido", title: "시도" },
+                    { id: "sigungo", title: "시군구" },
+                    { id: "facilityName", title: "시설명" },
+                    { id: "location", title: "위치" },
+                    { id: "locationgubun", title: "지역구분" },
+                    { id: "facilityCapacity", title: "시설용량" },
+                    { id: "yn", title: '여부', upName:'upChangeRe' , upSequnce:1 },
+                    { id: "authoDay", title: '허가일',upName:'upChangeRe', upSequnce:2 },
+                    { id: "area", title: '면적' ,upName:'upChangeRe',upSequnce:3 }];
+
+  const headMakeColSpan = (upHeadList: any) => {
+    return  ( <>
+    <TableRow>{
+    upHeadList.map((head: TableUpperProps) => 
+      (head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead  rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:
+        head.upSequnce> 1?null:<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>))}
+    </TableRow>
+    <TableRow>
+      {upHeadList.map((head: TableUpperProps) =>
+        (head.upName === 'upChangeRe'?<TableHead key={head.id}>{head.title}</TableHead>:null))}
+    </TableRow>
+    </>)
+  }
+
+
+
+  export default function PublicReuseFaciltyInsert() {
+
+  const nodeList= headMakeColSpan(upHeadList);
   const total = 100;
   return (  <div>
-            <UiTable publicReuseFacility={publicReuseFacility} headlist={headList} pageSize={100}  total={total}/>
+            <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} children={nodeList} headName={'test'} />
             </div>
   );
 }
+