fo: UiTable 수정

apps/fo/app/pages/(with-layout)/planSewage/page.tsx

@@ -20,13 +20,13 @@ const commentArray = [
 ]
 
 export default function PlanSewage() {
-  const {Common
-    ,PlanSewage 
-    ,PlanSewageSearch
-    ,initializeCommonData
-    ,searchPlanSewageList
-  } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
-  
+  const { Common
+    , PlanSewage
+    , PlanSewageSearch
+    , initializeCommonData
+    , searchPlanSewageList
+  } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] } };
+
   const {
     isInit,
     selectUpdownData,
@@ -42,7 +42,7 @@ export default function PlanSewage() {
   } = Common;
 
   const {
-    labelArray, 
+    labelArray,
   } = PlanSewageSearch;
 
   const {
@@ -69,9 +69,9 @@ export default function PlanSewage() {
 
   // 그리드 관련
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
-  
+
   // 모달 상태 추가
-  
+
   // 초기화 변수
   const [resetPage, setResetPage] = useState<boolean>(false);
   // 표 너비
@@ -109,17 +109,17 @@ export default function PlanSewage() {
         input.value = "";
       }
     }
-    ref.current.sidoValue='11';
+    ref.current.sidoValue = '11';
     searchPlanSewage(ref.current, 1, 10);
   }
 
   useEffect(() => {
-    if(!excelTrigger) return;
+    if (!excelTrigger) return;
 
     if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: '계획하수량 산정지표 현황', 
+      downloadExcel({
+        data: excelList as unknown as JSON[],
+        fileName: '계획하수량 산정지표 현황',
         sheetNameArray: ['계획하수량 산정지표 현황'],
         headerRange: 'A1:M1'
       });
@@ -130,31 +130,31 @@ export default function PlanSewage() {
    * 콜백함수
    */
   // 조회
-  const searchPlanSewage = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchPlanSewage = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt: number = 20) => {
     let nameCd, partStr
     switch (partValue) {
       case 'R':
         if (regionValue !== '0') {
-          if(unitWaterShedValue==='0') nameCd = regionValue;
-          else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
+          if (unitWaterShedValue === '0') nameCd = regionValue;
+          else if (middleRegionValue === '0') nameCd = unitWaterShedValue;
           else nameCd = middleRegionValue;
         }
         partStr = partValue
         break;
       default:
-        if(sidoValue !== '0') nameCd = ref.current.sidoValue!="0"?ref.current.sidoValue:sidoValue;
-        if(sigunValue !== '0') nameCd = sigunValue;
-        partStr = envPartValue !== '0' ? envPartValue:partValue;
+        if (sidoValue !== '0') nameCd = ref.current.sidoValue != "0" ? ref.current.sidoValue : sidoValue;
+        if (sigunValue !== '0') nameCd = sigunValue;
+        partStr = envPartValue !== '0' ? envPartValue : partValue;
         break;
     }
 
-    if(partStr === 'G'){
-      partValue = partValue==='G'?'A':partValue;
+    if (partStr === 'G') {
+      partValue = partValue === 'G' ? 'A' : partValue;
       searchPlanSewageList(pageNo, pageCnt, searchYear, partValue);
     }
-    else{
+    else {
       searchPlanSewageList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
-    } 
+    }
   }, [operationValue, fcltyName, searchPlanSewageList, searchYear, fcltCpct]);
 
   /**
@@ -162,7 +162,7 @@ export default function PlanSewage() {
    */
   useEffect(() => {
     if (!isInit) {
-      if(!initTrigger){
+      if (!initTrigger) {
         initializeCommonData();
         searchPlanSewage(ref.current, 1, 10);
         setInitTrigger(true);
@@ -170,9 +170,9 @@ export default function PlanSewage() {
     }
   }, [isInit, initializeCommonData, searchPlanSewageList, selectSearchYear, initTrigger, searchPlanSewage]);
 
-  const chkVal = useCallback((returntype:ReturnType) => {
+  const chkVal = useCallback((returntype: ReturnType) => {
     // setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
-    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
+    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G' ? upHeadList3 : upHeadList1);
     setResetPage(true);
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
@@ -190,11 +190,11 @@ export default function PlanSewage() {
 
   const mainList = planSewageList || [];
   const total = planSewageCount || 0;
-  
+
   return (
     <MainDiv>
       <Title title="계획하수량 산정지표 현황" />
-        <SearchBaseForm
+      <SearchBaseForm
         leftChildren={<>
           <SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
           <SearchInput className={"col-span-3"} label={labelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
@@ -212,12 +212,12 @@ export default function PlanSewage() {
         queryClick={chkVal}
         excelClick={excelDownload}
         initClick={resetVal}
-        ref={ref} isAdmin={false} initSidoValue={"11"}/>
+        ref={ref} isAdmin={false} initSidoValue={"11"} />
       <ListDiv>
         <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
-            <div className="w-[120%] min-[1200px]:w-[100%]">
-            <UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+          <div className="w-[120%] min-[1200px]:w-[100%]">
+            <UiTable cellClick={undefined} headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
           <UnderComment divHeight={"5"} commentArray={commentArray} />
         </div>

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

@@ -43,6 +43,7 @@ type UiHeadProps = {
   row?: number;
   widthPercent?: number;
   rowSpan?: number;
+  colSpan?: number;
 };
 
 export function UiTable({
@@ -136,13 +137,13 @@ export function UiTable({
         <></>
       )}
       <div className={`card !p-0r !m-[1.2rem] ${className}`}>
-        <Table variant="secondary" className={widthFixed?"table-fixed":""}>
-          {widthFixed?
-          <colgroup>
-            {leafCols.map(col => (
-            <col key={col.id} style={{ width: col.widthPercent ? `${col.widthPercent}%` : undefined }} />
-            ))}
-          </colgroup>:""}
+        <Table variant="secondary" className={widthFixed ? "table-fixed" : ""}>
+          {widthFixed ?
+            <colgroup>
+              {leafCols.map(col => (
+                <col key={col.id} style={{ width: col.widthPercent ? `${col.widthPercent}%` : undefined }} />
+              ))}
+            </colgroup> : ""}
           <TableHeader ref={headerRef} className="font-bold">
             {children ? children : <HeadMakeColSpan upHeadList={headlist} />}
           </TableHeader>
@@ -261,7 +262,10 @@ export function UiTable({
               <TableRow>
                 <TableCell
                   colSpan={
-                    headlist.filter((item) => item.visible != false).length
+                    headlist.filter((item) => item.visible != false).length -
+                    headlist.filter(
+                      (item) => item.visible != false && item.colSpan,
+                    ).length
                   }
                   className="h-24 text-center text-gray-500"
                 >