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 ( -
+
{/* 상단 타이틀 */}