From 260c1105e22cb102917137bd30481f1d4358a804 Mon Sep 17 00:00:00 2001 From: ljpark Date: Thu, 30 Apr 2026 18:16:26 +0900 Subject: [PATCH] =?UTF-8?q?dm:=20=EC=A4=91=EC=88=98=EB=8F=84=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EC=A4=912?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Copilot --- .../_components/GreywaterStatusSection.tsx | 211 +++++------------- apps/dm/app/store/dm-status/index.tsx | 30 ++- apps/dm/app/store/dm-status/type.ts | 32 ++- 3 files changed, 103 insertions(+), 170 deletions(-) diff --git a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx index d6affe1c2..3dcc0c390 100644 --- a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx +++ b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx @@ -7,11 +7,12 @@ import { useDmStore } from "@/app/store"; import { formatUsage } from "@/app/common/transValueFormat"; import type { DmStatusLawYearsType, - DmStatusUsgBildTpType, + DmStatusBildTpYearsType, DmStatusUsgYearsType, TableHeaderType, } from "@/app/store/dm-status/type"; import { Col2Name } from "@/app/store/dm-status/type"; + function SectionTitle({ children }: { children: React.ReactNode }) { return (
@@ -25,7 +26,6 @@ function Hr({ className = "" }: { className?: string }) { return
; } - const tableStyles = { container: "w-[1000px] mx-auto overflow-hidden", table: "w-full table-fixed border-collapse text-center text-[16px]", @@ -45,10 +45,17 @@ const headerColors6 = [ export default function GreywaterStatusSection() { const getRswtrByLawYears = useDmStore((state) => state.getRswtrByLawYears); + const getRswtrByBildTpYears = useDmStore((state) => state.getRswtrByBildTpYears); + const getRswtrByUsgYears = useDmStore((state) => state.getRswtrByUsgYears); const rswtrYears = useDmStore((state) => state.rswtr.rswtrYears); const selectYear = rswtrYears.slice(-1)[0]; const rswtrByLawYearsHeader = useDmStore((state) => state.rswtr.rswtrByLawYearsHeader); const rswtrByLawYears = useDmStore((state) => state.rswtr.rswtrByLawYears); + const rswtrByLawYearsFactory = useDmStore((state) => state.rswtr.rswtrByLawYearsFactory); + const rswtrByBildTpYearsHeader = useDmStore((state) => state.rswtr.rswtrByBildTpYearsHeader); + const rswtrByBildTpYears = useDmStore((state) => state.rswtr.rswtrByBildTpYears); + const rswtrByUsgYearsHeader = useDmStore((state) => state.rswtr.rswtrByUsgYearsHeader); + const rswtrByUsgYears = useDmStore((state) => state.rswtr.rswtrByUsgYears); // 출처 텍스트 function SourceText() { @@ -59,9 +66,13 @@ export default function GreywaterStatusSection() { ); } + useEffect(() => { void getRswtrByLawYears('nofactory'); - }, [getRswtrByLawYears]); + void getRswtrByLawYears('factory'); + void getRswtrByBildTpYears(); + void getRswtrByUsgYears(); + }, [getRswtrByLawYears, getRswtrByBildTpYears, getRswtrByUsgYears]); const renderPartHeaders = (headers: string[], headerColors: string[]) => { return headers.map((header, index) => ( @@ -128,13 +139,36 @@ export default function GreywaterStatusSection() { key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`} > - {String(rowData["COL2"]).indexOf("시설수") > -1 + {String(rowData["COL2"]).indexOf("CNT") > -1 ? Number(value).toLocaleString("ko-KR") : formatUsage(value as string | number, 10000, 1) } ); }); }; + + const renderBuildingUsageCells = ( + row: DmStatusBildTpYearsType|DmStatusUsgYearsType, + headers: TableHeaderType[] + ) => { + const rowData = row as Record; + const firstHeaderId = headers[0]?.id; + const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : ""; + + return headers.map((header, index) => { + const value = rowData[header.id]; + + return ( + + {index === 0 ? value : formatUsage(value as string | number, 1000, 1)} + + ); + }); + }; + const title = "중수도(현황)"; return ( @@ -148,12 +182,12 @@ export default function GreywaterStatusSection() {
- {/* 1) 전체 중수도 설치 및 이용 현황 */} + {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
- 전체 중수도 설치 및 이용 현황 + 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)
@@ -223,81 +257,14 @@ export default function GreywaterStatusSection() { > 구분 - - 2018 - - - 2019 - - - 2020 - - - 2021 - - - 2022 - - - 2023 - + {renderPartHeaders(rswtrYears, headerColors6)} - {[ - { - group: "전체", - rows: [ - ["시설수 (개소)", "125", "127", "139", "146", "151", "176"], - ["처리용량 (만m³/일)", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"], - ["사용량 (만m³/년)", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"], - ], - }, - { - group: "법적 대상", - rows: [ - ["시설수 (개소)", "59", "63", "78", "78", "82", "86"], - ["처리용량 (만m³/일)", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"], - ["사용량 (만m³/년)", "24,847", "24,021", "28,055", "17,959", "12,241", "12,296"], - ], - }, - { - group: "법적 비대상", - rows: [ - ["시설수 (개소)", "66", "64", "61", "68", "69", "90"], - ["처리용량 (만m³/일)", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"], - ["사용량 (만m³/년)", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"], - ], - }, - ].map((section, sIdx) => ( - - {section.rows.map((row, rIdx) => ( - - {rIdx === 0 && ( - - {section.group} - - )} - {row.map((val, i) => { - const isFirstCol = i === 0; - const isHighlightedCol = [1, 3, 5].includes(i); - - return ( - - ); - })} - - ))} - + {rswtrByLawYearsFactory.map((row, idx, arr) => ( + + {renderCells(idx, row, arr, rswtrByLawYearsHeader)} + ))} @@ -344,52 +311,13 @@ export default function GreywaterStatusSection() { - - 2018 - - - 2019 - - - 2020 - - - 2021 - - - 2022 - - - 2023 - + {renderPartHeaders(rswtrYears, headerColors6)} - {[ - ["공동주택", "804.0", "245.8", "255.1", "282.3", "255.1", "282.3"], - ["판매시설", "1,447.5", "477.1", "802.1", "713.0", "972.3", "742.4"], - ["숙박시설", "458.5", "0.4", "177.0", "102.0", "123.3", "140.9"], - ["업무시설", "20.7", "0.3", "14.3", "44.9", "31.5", "37.4"], - ["의료시설", "97.7", "7.2", "63.7", "55.7", "85.1", "70.4"], - ["교육연구시설", "536.6", "1.5", "1,558.4", "772.2", "315.1", "66.7"], - ["운수·물류시설", "759.2", "34.2", "459.8", "259.8", "252.8", "410.4"], - ["기타", "453.1", "443.3", "3,126.8", "2,451.5", "1,880.8", "199.7"], - ["합계", "35,936.3", "30,466.6", "37,487.2", "25,480.6", "24,345.8", "22,247.6"], - ].map((row, idx) => ( - - {row.map((val, i) => ( - - {val} - - ))} + {rswtrByBildTpYears.map((row, idx) => ( + + {renderBuildingUsageCells(row, rswtrByBildTpYearsHeader)} ))} @@ -437,48 +365,13 @@ export default function GreywaterStatusSection() { - - 2018 - - - 2019 - - - 2020 - - - 2021 - - - 2022 - - - 2023 - + {renderPartHeaders(rswtrYears, headerColors6)} - {[ - ["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"], - ["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"], - ["조경용수", "403.7", "99.3", "3,297.0", "2,611.1", "1,827.0", "1,116.7"], - ["청소용수", "623.9", "764.2", "1,430.6", "879.7", "1,146.2", "286.0"], - ["수세식화장실용수", "530.0", "646.6", "183.5", "161.2", "216.6", "147.6"], - ["냉·난방용수", "150.1", "56.2", "57.5", "6.4", "0.9", "0.5"], - ["친수용수", "120.8", "18.5", "29.3", "8.2", "4.1", "2.8"], - ["기타", "165.6", "16.1", "43.2", "5.7", "64.0", "73.9"], - ].map((row, idx) => ( + {rswtrByUsgYears.map((row, idx) => ( - {row.map((val, i) => ( - - {val} - - ))} + {renderBuildingUsageCells(row, rswtrByUsgYearsHeader)} ))} diff --git a/apps/dm/app/store/dm-status/index.tsx b/apps/dm/app/store/dm-status/index.tsx index d7ced4d41..7de2f2c78 100644 --- a/apps/dm/app/store/dm-status/index.tsx +++ b/apps/dm/app/store/dm-status/index.tsx @@ -36,6 +36,7 @@ export type DmStatusType = { rswtrByLawYearsHeader: TableHeaderType[]; rswtrByBildTpYearsHeader: TableHeaderType[]; rswtrByUsgYearsHeader: TableHeaderType[]; + rswtrByLawYearsFactory: DmStatusLawYearsType[]; rswtrByLawYears: DmStatusLawYearsType[]; rswtrByBildTpYears: DmStatusBildTpYearsType[]; rswtrByUsgYears: DmStatusUsgYearsType[]; @@ -68,6 +69,7 @@ export const dmStatusState: DmStatusType = { rswtrByLawYearsHeader: rswtrByLawYearsHeader, rswtrByBildTpYearsHeader: rswtrByBildTpYearsHeader, rswtrByUsgYearsHeader: rswtrByUsgYearsHeader, + rswtrByLawYearsFactory: [], rswtrByLawYears: [], rswtrByBildTpYears: [], rswtrByUsgYears: [], @@ -145,14 +147,26 @@ export const DmStatusReducer = (set: any): DmStatusActions => { ? Array.from({ length: 6 }, (_, index) => String(maxYear - 5 + index)) : dmStatusState.rswtr.rswtrYears; - set((state: DmStatusType) => ({ - ...state, - rswtr: { - ...state.rswtr, - rswtrYears, - rswtrByLawYears, - } - })); + if (bildTpCond === "factory") { + set((state: DmStatusType) => ({ + ...state, + rswtr: { + ...state.rswtr, + rswtrYears, + rswtrByLawYearsFactory: rswtrByLawYears, + } + })); + } else { + set((state: DmStatusType) => ({ + ...state, + rswtr: { + ...state.rswtr, + rswtrYears, + rswtrByLawYears, + } + })); + } + }, // 5.대민 중수도재이용현황 건축물별 최근 6년간 diff --git a/apps/dm/app/store/dm-status/type.ts b/apps/dm/app/store/dm-status/type.ts index c9d8986e9..8005b35cc 100644 --- a/apps/dm/app/store/dm-status/type.ts +++ b/apps/dm/app/store/dm-status/type.ts @@ -19,6 +19,7 @@ export type DmStatusBildTpYearsType = { Y4: string | number; Y5: string | number; Y6: string | number; + MAXYR?: string; // 최종 확정 연도 }; export type DmStatusUsgBildTpType = { @@ -151,20 +152,32 @@ export const rswtrByLawYearsHeader: TableHeaderType[] = [ ]; export const rswtrByLawYearsInit: DmStatusLawYearsType[] = [ - { COL1: "전체", COL2: "시설수 (개소)", Y1: "576", Y2: "633", Y3: "682", Y4: "740", Y5: "819", Y6: "842" }, + { COL1: "전체", COL2: "CNT", Y1: "576", Y2: "633", Y3: "682", Y4: "740", Y5: "819", Y6: "842" }, { COL1: "전체", COL2: "건축연면적 (만m²)", Y1: "1,494.2", Y2: "1,514.4", Y3: "1,524.9", Y4: "989.1", Y5: "1,104.3", Y6: "1,015.4" }, { COL1: "전체", COL2: "처리용량 (만m³/일)", Y1: "39.6", Y2: "40.0", Y3: "51.1", Y4: "47.1", Y5: "48.9", Y6: "50.7" }, { COL1: "전체", COL2: "사용량 (만m³/년)", Y1: "2,223.4", Y2: "1,165.2", Y3: "6,713.0", Y4: "4,681.7", Y5: "3,918.2", Y6: "898.4" }, - { COL1: "법적 대상", COL2: "시설수 (개소)", Y1: "146", Y2: "154", Y3: "156", Y4: "170", Y5: "166", Y6: "169" }, + { COL1: "법적 대상", COL2: "CNT", Y1: "146", Y2: "154", Y3: "156", Y4: "170", Y5: "166", Y6: "169" }, { COL1: "법적 대상", COL2: "건축연면적 (만m²)", Y1: "674.9", Y2: "682.4", Y3: "736.1", Y4: "421.1", Y5: "434.9", Y6: "465.5" }, { COL1: "법적 대상", COL2: "처리용량 (만m³/일)", Y1: "20.0", Y2: "20.1", Y3: "31.2", Y4: "22.8", Y5: "21.2", Y6: "24.7" }, { COL1: "법적 대상", COL2: "사용량 (만m³/년)", Y1: "1,819.4", Y2: "712.8", Y3: "6,479.9", Y4: "4,416.8", Y5: "3,663.1", Y6: "616.1" }, - { COL1: "법적 미대상", COL2: "시설수 (개소)", Y1: "430", Y2: "479", Y3: "526", Y4: "570", Y5: "653", Y6: "673" }, + { COL1: "법적 미대상", COL2: "CNT", Y1: "430", Y2: "479", Y3: "526", Y4: "570", Y5: "653", Y6: "673" }, { COL1: "법적 미대상", COL2: "건축연면적 (만m²)", Y1: "819.3", Y2: "832.0", Y3: "788.8", Y4: "568.0", Y5: "669.4", Y6: "549.9" }, { COL1: "법적 미대상", COL2: "처리용량 (만m³/일)", Y1: "19.6", Y2: "19.5", Y3: "19.9", Y4: "24.3", Y5: "27.7", Y6: "26.0" }, { COL1: "법적 미대상", COL2: "사용량 (만m³/년)", Y1: "404.0", Y2: "452.4", Y3: "233.1", Y4: "264.9", Y5: "255.1", Y6: "282.3" }, ]; +export const rswtrByLawYearsFactoryInit: DmStatusLawYearsType[] = [ + { COL1: "전체", COL2: "CNT", Y1: "125", Y2: "127", Y3: "139", Y4: "146", Y5: "151", Y6: "176" }, + { COL1: "전체", COL2: "처리용량 (만m³/일)", Y1: "141.3", Y2: "141.0", Y3: "146.7", Y4: "189.0", Y5: "190.3", Y6: "166.5" }, + { COL1: "전체", COL2: "사용량 (만m³/년)", Y1: "33,712", Y2: "29,300", Y3: "33,110", Y4: "22,284", Y5: "21,593", Y6: "21,349" }, + { COL1: "법적 대상", COL2: "CNT", Y1: "59", Y2: "63", Y3: "78", Y4: "78", Y5: "82", Y6: "86" }, + { COL1: "법적 대상", COL2: "처리용량 (만m³/일)", Y1: "108.6", Y2: "109.7", Y3: "118.1", Y4: "159.5", Y5: "142.6", Y6: "119.4" }, + { COL1: "법적 대상", COL2: "사용량 (만m³/년)", Y1: "24,847", Y2: "24,021", Y3: "28,055", Y4: "17,959", Y5: "12,241", Y6: "12,296" }, + { COL1: "법적 비대상", COL2: "CNT", Y1: "66", Y2: "64", Y3: "61", Y4: "68", Y5: "69", Y6: "90" }, + { COL1: "법적 비대상", COL2: "처리용량 (만m³/일)", Y1: "32.7", Y2: "31.4", Y3: "28.7", Y4: "29.5", Y5: "47.7", Y6: "47.1" }, + { COL1: "법적 비대상", COL2: "사용량 (만m³/년)", Y1: "8,864.9", Y2: "5,278.8", Y3: "5,054.7", Y4: "4,324.6", Y5: "9,353.3", Y6: "9,052.4" }, +]; + export const Col2Name: Record = { CNT: "시설수 (개소)", TOTAR: "건축연면적 (만m²)", @@ -188,6 +201,19 @@ export const rswtrByBildTpYearsHeader: TableHeaderType[] = [ { id: "Y6", title: "2024", row: 1, widthPercent: 5 }, ]; + +export const rswtrByBildTpYearsInit: DmStatusBildTpYearsType[] = [ + { BILD_TP: "공동주택", Y1: "804.0", Y2: "245.8", Y3: "255.1", Y4: "282.3", Y5: "255.1", Y6: "282.3" }, + { BILD_TP: "판매시설", Y1: "1,447.5", Y2: "477.1", Y3: "802.1", Y4: "713.0", Y5: "972.3", Y6: "742.4" }, + { BILD_TP: "숙박시설", Y1: "458.5", Y2: "0.4", Y3: "177.0", Y4: "102.0", Y5: "123.3", Y6: "140.9" }, + { BILD_TP: "업무시설", Y1: "20.7", Y2: "0.3", Y3: "14.3", Y4: "44.9", Y5: "31.5", Y6: "37.4" }, + { BILD_TP: "의료시설", Y1: "97.7", Y2: "7.2", Y3: "63.7", Y4: "55.7", Y5: "85.1", Y6: "70.4" }, + { BILD_TP: "교육연구시설", Y1: "536.6", Y2: "1.5", Y3: "1,558.4", Y4: "772.2", Y5: "315.1", Y6: "66.7" }, + { BILD_TP: "운수·물류시설", Y1: "759.2", Y2: "34.2", Y3: "459.8", Y4: "259.8", Y5: "252.8", Y6: "410.4" }, + { BILD_TP: "기타", Y1: "453.1", Y2: "443.3", Y3: "3,126.8", Y4: "2,451.5", Y5: "1,880.8", Y6: "199.7" }, + { BILD_TP: "합계", Y1: "35,936.3", Y2: "30,466.6", Y3: "37,487.2", Y4: "25,480.6", Y5: "24,345.8", Y6: "22,247.6" }, +]; + export const rswtrByUsgYearsHeader: TableHeaderType[] = [ { id: "USE_NM", title: "용도", row: 0, widthPercent: 15 }, { id: "Y1", title: "2019", row: 1, widthPercent: 5 },