From 2ec793fd597c9bc06544ac11160ea2da55db0e3f Mon Sep 17 00:00:00 2001 From: dongsilove Date: Mon, 29 Dec 2025 11:00:38 +0900 Subject: [PATCH] =?UTF-8?q?fo:=20UiTable=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/(with-layout)/planSewage/page.tsx | 66 +++++++++---------- .../src/ui/table/index.tsx | 20 +++--- 2 files changed, 45 insertions(+), 41 deletions(-) diff --git a/apps/fo/app/pages/(with-layout)/planSewage/page.tsx b/apps/fo/app/pages/(with-layout)/planSewage/page.tsx index 1f8bd1e94..62ae9483a 100644 --- a/apps/fo/app/pages/(with-layout)/planSewage/page.tsx +++ b/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(null); - + // 모달 상태 추가 - + // 초기화 변수 const [resetPage, setResetPage] = useState(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 ( - <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> diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index dc763d00b..f62831959 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/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" >