@@ -15,13 +25,6 @@ function Hr({ className = "" }: { className?: string }) {
return
;
}
-function SourceText() {
- return (
-
- 자료: 환경부(2024), 「2023 하수도 통계」
-
- );
-}
const tableStyles = {
container: "w-[1000px] mx-auto overflow-hidden",
@@ -31,7 +34,107 @@ const tableStyles = {
headerBg: "bg-[#E3E7EA]",
};
+const headerColors6 = [
+ "bg-[#01ACE5]",
+ "bg-[#17AFC7]",
+ "bg-[#2CB2A9]",
+ "bg-[#42B58B]",
+ "bg-[#57B86D]",
+ "bg-[#81C784]",
+];
+
export default function GreywaterStatusSection() {
+ const getRswtrByLawYears = useDmStore((state) => state.getRswtrByLawYears);
+ 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);
+
+ // 출처 텍스트
+ function SourceText() {
+ return (
+
+ 자료: 환경부(2024), 「{selectYear} 하수도 통계」
+
+ );
+ }
+
+ useEffect(() => {
+ void getRswtrByLawYears('nofactory');
+ }, [getRswtrByLawYears]);
+
+ const renderPartHeaders = (headers: string[], headerColors: string[]) => {
+ return headers.map((header, index) => (
+
+ {header}
+ |
+ ));
+ };
+
+ const renderCells = (
+ rowIdx: number,
+ row: DmStatusLawYearsType,
+ data: DmStatusLawYearsType[],
+ headers: TableHeaderType[]
+ ) => {
+ const rowData = row as Record
;
+ const currentCol1 = String(rowData["COL1"] ?? "");
+
+ // 이전 값
+ const prevCol1 = rowIdx > 0 ? data[rowIdx - 1]?.COL1 : null;
+
+ // 현재 그룹의 rowspan 계산
+ const getRowSpan = () => {
+ let count = 0;
+ for (let i = rowIdx; i < data.length; i++) {
+ if (data[i]?.COL1 === currentCol1) count++;
+ else break;
+ }
+ return count;
+ };
+
+ return headers.map((header, index) => {
+ const value = rowData[header.id];
+
+ // COL1 처리 (rowspan 핵심)
+ if (header.id === "COL1") {
+ // 이전과 같으면 렌더링 안함
+ if (currentCol1 === prevCol1) return null;
+
+ return (
+
+ {value}
+ |
+ );
+ } else if (header.id === "COL2") {
+ return (
+ |
+ );
+ }
+
+ return (
+
+ {String(rowData["COL2"]).indexOf("시설수") > -1
+ ? Number(value).toLocaleString("ko-KR")
+ : formatUsage(value as string | number, 10000, 1) }
+ |
+ );
+ });
+ };
const title = "중수도(현황)";
return (
@@ -73,84 +176,14 @@ export default function GreywaterStatusSection() {
>
구분
-
- 2018
- |
-
- 2019
- |
-
- 2020
- |
-
- 2021
- |
-
- 2022
- |
-
- 2023
- |
+ {renderPartHeaders(rswtrYears, headerColors6)}
- {[
- {
- group: "전체",
- rows: [
- ["시설수 (개소)", "576", "633", "682", "740", "819", "842"],
- ["건축연면적 (만m²)", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"],
- ["처리용량 (만m³/일)", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"],
- ["사용량 (만m³/년)", "2,223.4", "1,165.2", "6,713.0", "4,681.7", "3,918.2", "898.4"],
- ],
- },
- {
- group: "법적 대상",
- rows: [
- ["시설수 (개소)", "146", "154", "156", "170", "166", "169"],
- ["건축연면적 (만m²)", "674.9", "682.4", "736.1", "421.1", "434.9", "465.5"],
- ["처리용량 (만m³/일)", "20.0", "20.1", "31.2", "22.8", "21.2", "24.7"],
- ["사용량 (만m³/년)", "1,819.4", "712.8", "6,479.9", "4,416.8", "3,663.1", "616.1"],
- ],
- },
- {
- group: "법적 비대상",
- rows: [
- ["시설수 (개소)", "430", "479", "526", "570", "653", "673"],
- ["건축연면적 (만m²)", "819.3", "832.0", "788.8", "568.0", "669.4", "549.9"],
- ["처리용량 (만m³/일)", "19.6", "19.5", "19.9", "24.3", "27.7", "26.0"],
- ["사용량 (만m³/년)", "404.0", "452.4", "233.1", "264.9", "255.1", "282.3"],
- ],
- },
- ].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 (
- |
- );
- })}
-
- ))}
-
+ {rswtrByLawYears.map((row, idx, arr) => (
+
+ {renderCells(idx, row, arr, rswtrByLawYearsHeader)}
+
))}
@@ -458,4 +491,4 @@ export default function GreywaterStatusSection() {