물 재이용 현황 (빗물이용시설현황, 중수도현황) 인트로 이미지 삽입 및 하수처리재이용시설현황 불필요 코드 삭제

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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
+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 (
+    <div className="mb-[70px] px-[60px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[136px]">
+        <div>
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.1em] text-neutral-900">
+            건물 안에서 흐르는 또 하나의 자원,
+            <br />
+            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
+              중수도
+            </span>
+            가 물 절약을 실천합니다.
+          </h3>
+
+          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+            중수도는 개별 건축물이나 단지 내에서 사용한 물을 다시 처리하여
+            <br />
+            청소, 조경, 공업용수로 사용하고 있습니다.
+          </p>
+
+          <div className="mt-10 space-y-8">
+            {items.map((item) => (
+              <div key={item.title} className="flex gap-3">
+                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
+                  <Image src={item.icon} alt="" width={48} height={48} />
+                </div>
+
+                <div>
+                  <strong className="block text-[18px] font-extrabold text-neutral-900">
+                    {item.title}
+                  </strong>
+                  <p className="mt-2 text-[16px] leading-[1.7] tracking-tighter text-neutral-600">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center">
+          <Image
+            src="/images/landing/greywater_status_img.png"
+            alt="중수도 재이용 개념도"
+            width={400}
+            height={343}
+            className="h-auto w-full max-w-[400px]"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 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() {
         </h2>
       </div>
 
-      <div className="mt-10 pb-[120px]">
+      <div className="mt-[70px] pb-[120px]">
         {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
-        <section
-          id="status-greywater-overall"
-          className="mt-10 scroll-mt-[120px]"
-        >
-          <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
+        <section>
+          {/* 인트로 영역 */}  
+          <GreywaterIntroSummary />
 
-          <div className="mt-10">
-            <div className={tableStyles.container}>
-              <table className={tableStyles.table}>
-                <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "160px" }} />
-                  <col />
-                  <col />
-                  <col />
-                  <col />
-                  <col />
-                  <col />
-                </colgroup>
-                <thead>
-                  <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
-                      구분
-                    </th>
-                    {renderPartHeaders(rswtrYears, headerColors6)}
-                  </tr>
-                </thead>
-                <tbody>
-                  {rswtrByLawYears.map((row, idx, arr) => (
-                    <tr key={idx}>
-                      {renderCells(idx, row, arr, rswtrByLawYearsHeader)}
+          <div id="status-greywater-overall" className="mt-10 scroll-mt-[120px]">
+            <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
+
+            <div className="mt-10">
+                <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                    <colgroup>
+                    <col style={{ width: "130px" }} />
+                    <col style={{ width: "160px" }} />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    </colgroup>
+                    <thead>
+                    <tr>
+                        <th
+                        colSpan={2}
+                        className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                        >
+                        구분
+                        </th>
+                        {renderPartHeaders(rswtrYears, headerColors6)}
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                    </thead>
+                    <tbody>
+                    {rswtrByLawYears.map((row, idx, arr) => (
+                        <tr key={idx}>
+                        {renderCells(idx, row, arr, rswtrByLawYearsHeader)}
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+                </div>
 
-            <SourceText />
+                <SourceText />
+            </div>
           </div>
         </section>
 

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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
+/* 인트로 영역 */
+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 (
+    <div className="mb-[70px] px-[60px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[136px]">
+        {/* 좌측 */}
+        <div>
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.03em] text-neutral-900">
+            기후위기 시대의 수자원 확보,
+            <br />
+            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
+              빗물 재이용
+            </span>
+            이 앞장섭니다.
+          </h3>
+
+          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+            2023년 기준 전국 3,500여 개 시설에서
+            <br />
+            연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다.
+          </p>
+
+          <div className="mt-10 space-y-8">
+            {items.map((item) => (
+              <div key={item.title} className="flex gap-3">
+                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
+                  <Image
+                    src={item.icon}
+                    alt=""
+                    width={48}
+                    height={48}
+                    className="object-contain"
+                  />
+                </div>
+
+                <div>
+                  <strong className="block text-[18px] font-extrabold text-neutral-900">
+                    {item.title}
+                  </strong>
+                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 우측 이미지 */}
+        <div className="flex items-center justify-center">
+          <Image
+            src="/images/landing/rain_status_img.png"
+            alt="빗물 재이용 개념도"
+            width={400}
+            height={343}
+            className="h-auto w-full max-w-[400px] object-contain"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 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() {
         </h2>
       </div>
 
-      <div className="mt-10 pb-[120px]">
+      <div className="mt-[70px] pb-[120px]">
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
-          <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
+        <section>
+          {/* 인트로 영역 */}
+          <RainIntroSummary />
+          
+          <div id="status-rain-building" className="scroll-mt-[120px]">
+            <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-10">
-            <div className={tableStyles.container}>
-              <table className={tableStyles.table}>
-                <thead>
-                  <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
-                      구분
-                    </th>
-                    <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
-                      빗물이용량 (천m³/년)
-                    </th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
-                  </tr>
-                </thead>
-                <tbody>
-                  {rainyByBildTpYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
-                      {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
+            <div className="mt-10">
+                <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                    <thead>
+                    <tr>
+                        <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                        구분
+                        </th>
+                        <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                        빗물이용량 (천m³/년)
+                        </th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                    <tr>
+                        {renderPartHeaders(rainyYears, headerColors6)}
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rainyByBildTpYears.map((row, idx) => (
+                        <tr key={idx} className="bg-white">
+                        {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+                </div>
 
-            <SourceText />
+                <SourceText />
+            </div>
           </div>
         </section>
 

apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx

@@ -117,7 +117,7 @@ export default function SewageStatusSection() {
   const title = "하수처리수 재이용시설(현황)";
 
   return (
-    <div className="relative bg-white">
+    <div className="bg-white">
       {/* 상단 타이틀 */}
       <div className="inline-block">
         <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">