From 2a4d159aef54b814e774e294644bbdebf01fcd21 Mon Sep 17 00:00:00 2001 From: LGS Date: Mon, 4 May 2026 11:11:13 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=20=EC=9E=AC=EC=9D=B4=EC=9A=A9=20?= =?UTF-8?q?=ED=98=84=ED=99=A9=20(=EB=B9=97=EB=AC=BC=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=EC=8B=9C=EC=84=A4=ED=98=84=ED=99=A9,=20=EC=A4=91=EC=88=98?= =?UTF-8?q?=EB=8F=84=ED=98=84=ED=99=A9)=20=EC=9D=B8=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=BD=EC=9E=85=20=EB=B0=8F=20?= =?UTF-8?q?=ED=95=98=EC=88=98=EC=B2=98=EB=A6=AC=EC=9E=AC=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=EC=8B=9C=EC=84=A4=ED=98=84=ED=99=A9=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/GreywaterStatusSection.tsx | 154 +++++++++++++----- .../status/_components/RainStatusSection.tsx | 144 ++++++++++++---- .../_components/SewageStatusSection.tsx | 2 +- 3 files changed, 232 insertions(+), 68 deletions(-) diff --git a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx index 3dcc0c390..f1e5032b6 100644 --- a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx +++ b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx @@ -3,6 +3,7 @@ import React from "react"; import { useEffect, useMemo } from "react"; // import SubPageHeader from "@/components/SubPageHeader"; +import Image from "next/image"; import { useDmStore } from "@/app/store"; import { formatUsage } from "@/app/common/transValueFormat"; import type { @@ -26,6 +27,79 @@ function Hr({ className = "" }: { className?: string }) { return
; } +function GreywaterIntroSummary() { + const items = [ + { + icon: "/images/landing/icon_recycle.png", + title: "지속적인 인프라 확산", + desc: "전국 중수도 설치 시설은 2018년 대비 약 45% 증가하여, 현재 1,000여 개소에서 물 재이용이 활발히 이뤄지고 있습니다.", + }, + { + icon: "/images/landing/icon_factory.png", + title: "조경용수의 핵심 자원", + desc: "전체 중수도 이용량의 약 96%가 공업용수로 활용되어, 산업 현장에서의 상수도 의존도를 낮추는 데 크게 기여하고 있습니다.", + }, + { + icon: "/images/landing/icon_faucet.png", + title: "민간·공공의 협력", + desc: "공업용 외에도 청소·화장실용수로 꾸준히 사용되며 우리 생활 곳곳에서 물 자원 낭비를 막고 있습니다.", + }, + ]; + + return ( +
+
+
+

+ 건물 안에서 흐르는 또 하나의 자원, +
+ + 중수도 + + 가 물 절약을 실천합니다. +

+ +

+ 중수도는 개별 건축물이나 단지 내에서 사용한 물을 다시 처리하여 +
+ 청소, 조경, 공업용수로 사용하고 있습니다. +

+ +
+ {items.map((item) => ( +
+
+ +
+ +
+ + {item.title} + +

+ {item.desc} +

+
+
+ ))} +
+
+ +
+ 중수도 재이용 개념도 +
+
+
+ ); +} + const tableStyles = { container: "w-[1000px] mx-auto overflow-hidden", table: "w-full table-fixed border-collapse text-center text-[16px]", @@ -181,49 +255,51 @@ export default function GreywaterStatusSection() {
-
+
{/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */} -
- 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) +
+ {/* 인트로 영역 */} + -
-
- - - - - - - - - - - - - - - {renderPartHeaders(rswtrYears, headerColors6)} - - - - {rswtrByLawYears.map((row, idx, arr) => ( - - {renderCells(idx, row, arr, rswtrByLawYearsHeader)} +
+ 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) + +
+
+
- 구분 -
+ + + + + + + + + + + + + + {renderPartHeaders(rswtrYears, headerColors6)} - ))} - -
+ 구분 +
-
+ + + {rswtrByLawYears.map((row, idx, arr) => ( + + {renderCells(idx, row, arr, rswtrByLawYearsHeader)} + + ))} + + +
- + +
diff --git a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx index 81b9a73c3..acdcafbae 100644 --- a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx +++ b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react"; // import SubPageHeader from "@/components/SubPageHeader"; +import Image from "next/image"; import { useDmStore } from "@/app/store"; import { formatUsage } from "@/app/common/transValueFormat"; import type { @@ -27,6 +28,88 @@ function Hr({ className = "" }: { className?: string }) { return
; } +/* 인트로 영역 */ +function RainIntroSummary() { + const items = [ + { + icon: "/images/landing/icon_chart.png", + title: "지속적인 이용량 증가", + desc: "2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.", + }, + { + icon: "/images/landing/icon_hand.png", + title: "조경용수의 핵심 자원", + desc: "재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.", + }, + { + icon: "/images/landing/icon_building.png", + title: "민간·공공의 협력", + desc: "골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.", + }, + ]; + + return ( +
+
+ {/* 좌측 */} +
+

+ 기후위기 시대의 수자원 확보, +
+ + 빗물 재이용 + + 이 앞장섭니다. +

+ +

+ 2023년 기준 전국 3,500여 개 시설에서 +
+ 연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다. +

+ +
+ {items.map((item) => ( +
+
+ +
+ +
+ + {item.title} + +

+ {item.desc} +

+
+
+ ))} +
+
+ + {/* 우측 이미지 */} +
+ 빗물 재이용 개념도 +
+
+
+ ); +} + const tableStyles = { container: "w-[1000px] mx-auto overflow-hidden", table: "w-full table-fixed border-collapse text-center text-[16px]", @@ -153,38 +236,43 @@ export default function RainStatusSection() {
-
+
{/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} -
- 빗물이용시설의 건축물별 빗물이용량 현황 +
+ {/* 인트로 영역 */} + + +
+ 빗물이용시설의 건축물별 빗물이용량 현황 -
-
- - - - - - - - {renderPartHeaders(rainyYears, headerColors6)} - - - - {rainyByBildTpYears.map((row, idx) => ( - - {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)} +
+
+
- 구분 - - 빗물이용량 (천m³/년) -
+ + + + - ))} - -
+ 구분 + + 빗물이용량 (천m³/년) +
-
+ + {renderPartHeaders(rainyYears, headerColors6)} + + + + {rainyByBildTpYears.map((row, idx) => ( + + {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)} + + ))} + + +
- + +
diff --git a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx index ccd351976..472018023 100644 --- a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx +++ b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx @@ -117,7 +117,7 @@ export default function SewageStatusSection() { const title = "하수처리수 재이용시설(현황)"; return ( -
+
{/* 상단 타이틀 */}