From ec59447db99777c70e2b336dc8c895a6a4fcdb0a Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Thu, 26 Feb 2026 14:15:24 +0900
Subject: [PATCH] =?UTF-8?q?dm=5Fnew:=20<Image=20/>=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reuse/_components/CaseTabsCarousel.tsx    | 26 +++++++++++-------
 .../reuse/_components/ImageSlider.tsx         | 26 +++++++++++-------
 .../app/(landing)/reuse/_components/Lnb.tsx   | 11 +++++---
 .../(landing)/reuse/_components/TopNav.tsx    | 22 ++++++++++++---
 .../app/(landing)/reuse/_sections/Cases.tsx   | 10 ++++---
 .../app/(landing)/reuse/_sections/Hero.tsx    | 11 ++++++--
 .../(landing)/reuse/_sections/IntroCards.tsx  | 27 ++++++++++++-------
 .../(landing)/reuse/cases/greywater/page.tsx  | 18 ++++++++-----
 .../app/(landing)/reuse/cases/rain/page.tsx   | 15 +++++++----
 .../(landing)/reuse/cases/treated/page.tsx    | 18 ++++++++-----
 .../(landing)/reuse/intro/greywater/page.tsx  | 15 +++++++----
 .../app/(landing)/reuse/intro/law/page.tsx    | 24 +++++++++++------
 .../app/(landing)/reuse/intro/rain/page.tsx   | 18 ++++++++-----
 .../(landing)/reuse/intro/treated/page.tsx    | 12 ++++++---
 14 files changed, 173 insertions(+), 80 deletions(-)

diff --git a/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx b/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
index 8d916817e..ece8f0848 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import Image from "next/image";
 
 /**
  * CaseTabsCarousel.tsx (FINAL OPTIMIZED)
@@ -459,10 +460,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="이전"
           >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -480,10 +483,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="다음"
           >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
                             className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
                           >
                             <div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
-                              <img
+                              <Image
                                 src={c.imageSrc}
                                 alt={c.title}
+                                width={640}
+                                height={241}
                                 className="h-full w-full object-cover"
+                                style={{ width: "100%", height: "100%" }}
                                 loading="lazy"
                               />
                             </div>
diff --git a/apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx b/apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx
index 6c50d5a5c..41d8987b8 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx
@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
 "use client";
 
+import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 type Slide = { src: string; alt?: string };
@@ -86,10 +87,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
             >
               {safeSlides.map((s, i) => (
                 <div key={`${s.src}-${i}`} className="min-w-full">
-                  <img
+                  <Image
                     src={s.src}
                     alt={s.alt ?? `slide-${i + 1}`}
+                    width={583}
+                    height={400}
                     className="w-full h-full object-contain"
+                    style={{ width: "100%", height: "100%" }}
                     draggable={false}
                   />
                 </div>
diff --git a/apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx b/apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx
index 22066069a..f5bc7bbfe 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx
@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/Lnb.tsx
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -89,10 +90,12 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
                         isOpen ? "rotate-180" : "rotate-0",
                     ].join(" ")}
                     >
-                    <img
-                        src="/images/landing/drop_arrow.svg"
-                        alt="드롭다운 화살표 아이콘"
-                        className="w-7 h-7"
+                    <Image
+                      src="/images/landing/drop_arrow.svg"
+                      alt="드롭다운 화살표 아이콘"
+                      width={28}
+                      height={28}
+                      className="w-7 h-7"
                     />
                   </span>
                 </button>
diff --git a/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx b/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
index 8174da2cf..17c6f5e04 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/TopNav.tsx
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useId, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -367,10 +368,13 @@ export default function TopNav() {
             {/* 좌측: 로고 */}
             <div className="flex items-center gap-3">
               <Link href="/reuse" className="flex items-center">
-                <img
+                <Image
                   src="/images/landing/logo.png"
                   alt="HASUON"
+                  width={229}
+                  height={46}
                   className="h-9 w-auto"
+                  priority
                 />
               </Link>
             </div>
@@ -423,7 +427,13 @@ export default function TopNav() {
                 >
                   로그인
                   <span aria-hidden>
-                    <img src="/images/landing/icon_login.png" alt="로그인 아이콘" className="h-6 w-6 object-contain ml-1"/>
+                    <Image
+                      src="/images/landing/icon_login.png"
+                      alt="로그인 아이콘"
+                      width={24}
+                      height={24}
+                      className="h-6 w-6 object-contain ml-1"
+                    />
                   </span>
                 </button>
               ) : (
@@ -438,7 +448,13 @@ export default function TopNav() {
                   >
                     로그아웃
                     <span aria-hidden>
-                        <img src="/images/landing/icon_logout.png" alt="로그아웃 아이콘" className="h-6 w-6 object-contain"/>
+                        <Image
+                          src="/images/landing/icon_logout.png"
+                          alt="로그아웃 아이콘"
+                          width={24}
+                          height={24}
+                          className="h-6 w-6 object-contain"
+                        />
                     </span>
                   </button>
                 </>
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx b/apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx
index 077d05cfe..757950369 100644
--- a/apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx
@@ -1,6 +1,9 @@
 // apps/dm/app/(landing)/reuse/_sections/Cases.tsx
 "use client";
 
+import Image from "next/image";
+import section03 from "@/public/images/landing/section_03.png";
+
 export default function Cases() {
   return (
     <section id="cases" className="bg-[#EAF6F6]">
@@ -50,10 +53,11 @@ export default function Cases() {
                 w-full max-w-[720px]
               "
             >
-              <img
-                src="/images/landing/section_03.png"
+              <Image
+                src={section03}
                 alt="물 재이용 현황 데이터 테이블"
                 className="w-full h-auto object-cover"
+                style={{ width: "100%", height: "auto" }}
               />
             </div>
           </div>
@@ -62,4 +66,4 @@ export default function Cases() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx b/apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx
index 8f93bdd72..c520f5aea 100644
--- a/apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx
@@ -1,4 +1,5 @@
 // apps/dm/app/(landing)/reuse/_sections/Hero.tsx
+import Image from "next/image";
 import styles from "../reuse.module.css";
 
 export default function Hero() {
@@ -21,9 +22,15 @@ export default function Hero() {
         </div>
       </div>
       <div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
-        <img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
+        <Image
+          src="/images/landing/scroll_down.svg"
+          alt=""
+          width={26}
+          height={40}
+          className="w-[26px] h-[40px]"
+        />
         <span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx b/apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx
index e7153d721..c8c69ad7b 100644
--- a/apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx
+++ b/apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx
@@ -1,12 +1,17 @@
 // apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
+import card01 from "@/public/images/landing/card_01.jpg";
+import card02 from "@/public/images/landing/card_02.jpg";
+import card03 from "@/public/images/landing/card_03.jpg";
+import card04 from "@/public/images/landing/card_04.jpg";
 
 type IntroCardItem = {
   title: string;
   desc: string;
-  image: string;
+  image: StaticImageData;
   href: string;
 };
 
@@ -14,25 +19,25 @@ const INTRO_CARDS: IntroCardItem[] = [
   {
     title: "물 재이용 법",
     desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
-    image: "/images/landing/card_01.jpg",
+    image: card01,
     href: "/reuse/intro/law",
   },
   {
     title: "친환경 수자원 빗물",
     desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
-    image: "/images/landing/card_02.jpg",
+    image: card02,
     href: "/reuse/intro/rain",
   },
   {
     title: "알뜰하게 재이용되는 중수",
     desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
-    image: "/images/landing/card_03.jpg",
+    image: card03,
     href: "/reuse/intro/greywater",
   },
   {
     title: "하수처리수 재이용",
     desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
-    image: "/images/landing/card_04.jpg",
+    image: card04,
     href: "/reuse/intro/treated",
   },
 ];
@@ -61,10 +66,12 @@ export default function IntroCards() {
                     className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
                 >
                     {/* 배경 이미지 (이미 그라디언트 포함) */}
-                    <img
-                    src={card.image}
-                    alt={card.title}
-                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+                    <Image
+                      src={card.image}
+                      alt={card.title}
+                      fill
+                      sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
+                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                     />
 
                     {/* 텍스트 영역 */}
@@ -83,4 +90,4 @@ export default function IntroCards() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx b/apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx
index 3ca2adb63..6d4d00af1 100644
--- a/apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx
@@ -1,7 +1,12 @@
 // apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
+import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
+import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
+import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
       <section className="mt-6">
         <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/greywater_overall.png" alt="전체 중수도 설치 및 이용 현황 설명" />
+          <ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
         </div>
       </section>
 
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
       <section>
         <SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/greywater_factory.png" alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
+          <ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
         </div>
       </section>
 
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
       <section className="pb-16">
         <SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/greywater_building.png" alt="중수도 건축물별 이용량 현황 설명" />
+          <ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
         </div>
       </section>
 
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
       <section className="pb-[200px]">
         <SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/greywater_usage.png" alt="중수도 용도별 이용량 현황 설명" />
+          <ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
         </div>
       </section>      
     </div>
diff --git a/apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx b/apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx
index b9aa54f15..3d7aa9a3f 100644
--- a/apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx
@@ -1,7 +1,11 @@
 // apps/dm/app/(landing)/reuse/cases/rain/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import rainwaterBuilding from "@/public/images/landing/cases/rainwater_building.png";
+import rainwaterUsage from "@/public/images/landing/cases/rainwater_usage.png";
+import rainwaterUsageAmount from "@/public/images/landing/cases/rainwater_usage_amount.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
       <section className="mt-6">
         <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/rainwater_building.png" alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
+          <ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
         </div>
       </section>
 
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
       <section>
         <SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/rainwater_usage.png" alt="빗물이용시설의 용도별 분포 설명" />
+          <ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
         </div>
       </section>
 
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
       <section className="pb-[200px]">
         <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/rainwater_usage_amount.png" alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
+          <ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
         </div>
       </section>
     </div>
diff --git a/apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx b/apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx
index e3c900557..b9e9073c0 100644
--- a/apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx
@@ -1,7 +1,12 @@
 // apps/dm/app/(landing)/reuse/cases/treated/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import treatedWaterYear from "@/public/images/landing/cases/treated_water_year.png";
+import treatedWaterUsage from "@/public/images/landing/cases/treated_water_usage.png";
+import treatedWaterFacility from "@/public/images/landing/cases/treated_water_facility.png";
+import treatedWaterRegion from "@/public/images/landing/cases/treated_water_region.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
       <section className="mt-6">
         <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/treated_water_year.png" alt="연도별 하수처리수 재이용 현황 설명" />
+          <ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
         </div>
       </section>
 
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
       <section>
         <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/treated_water_usage.png" alt="용도별 하수처리수 재이용 현황 설명" />
+          <ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
         </div>
       </section>
 
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
       <section>
         <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/treated_water_facility.png" alt="하수처리시설 설치 및 이용 현황 설명" />
+          <ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
         </div>
       </section>
 
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
       <section className="pb-[200px]">
         <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/cases/treated_water_region.png" alt="시도별 하수처리수 재이용 현황 설명" />
+          <ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
         </div>
       </section>
     </div>
diff --git a/apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx b/apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx
index 470f49ee2..d694d040e 100644
--- a/apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx
@@ -1,7 +1,11 @@
 // apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import greywaterIntro from "@/public/images/landing/intro/greywater_intro.png";
+import greywaterMandatory from "@/public/images/landing/intro/greywater_mandatory.png";
+import greywaterStandard from "@/public/images/landing/intro/greywater_standard.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
       <section className="mt-6">
         <SectionTitle>중수 재이용 소개</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
+          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
         </div>
       </section>
 
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
       <section>
         <SectionTitle>중수도 설치 의무 대상</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상 설명" />
+          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
         </div>
       </section>
 
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
       <section className="pb-[200px]">
         <SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준 설명" />
+          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
         </div>
       </section>
     </div>
diff --git a/apps/dm_new/app/(landing)/reuse/intro/law/page.tsx b/apps/dm_new/app/(landing)/reuse/intro/law/page.tsx
index 284b884de..c9952bf0b 100644
--- a/apps/dm_new/app/(landing)/reuse/intro/law/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/intro/law/page.tsx
@@ -1,7 +1,14 @@
 // apps/dm/app/(landing)/reuse/intro/law/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
+import performanceLeft from "@/public/images/landing/intro/performance_left.png";
+import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
+import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
+import relNote from "@/public/images/landing/intro/rel_note.png";
+import linkage from "@/public/images/landing/intro/linkage.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +28,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +66,7 @@ export default function WaterReuseLawPage() {
       <section className="mt-6">
         <SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/law_timeline.png" alt="법제도 타임라인" />
+          <ImgCard src={lawTimeline} alt="법제도 타임라인" />
         </div>
       </section>
 
@@ -68,7 +76,7 @@ export default function WaterReuseLawPage() {
       <section>
         <SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/performance_left.png" alt="실적 현황 요약" />
+          <ImgCard src={performanceLeft} alt="실적 현황 요약" />
         </div>
       </section>
 
@@ -78,7 +86,7 @@ export default function WaterReuseLawPage() {
       <section>
         <SectionTitle>국내 관련 현황</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/domestic_textbox.png" alt="국내 관련 현황 설명" />
+          <ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
         </div>
       </section>
 
@@ -88,7 +96,7 @@ export default function WaterReuseLawPage() {
       <section>
         <SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/policy_timeline.png" alt="정책 변천 타임라인" />
+          <ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
         </div>
       </section>
 
@@ -98,7 +106,7 @@ export default function WaterReuseLawPage() {
       <section>
         <SectionTitle>타법령과의 관계도</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/rel_note.png" alt="관계도 설명" />
+          <ImgCard src={relNote} alt="관계도 설명" />
         </div>
       </section>
 
@@ -114,7 +122,7 @@ export default function WaterReuseLawPage() {
                 • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
             </p>
           </div>
-          <ImgCard src="/images/landing/intro/linkage.png" alt="국내 연계 현황" />
+          <ImgCard src={linkage} alt="국내 연계 현황" />
         </div>
       </section>
     </div>
diff --git a/apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx b/apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx
index bb9dc37db..fdd48aa5a 100644
--- a/apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx
@@ -1,7 +1,12 @@
 // apps/dm/app/(landing)/reuse/intro/law/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import rainreuseIntro from "@/public/images/landing/intro/rainreuse_intro.png";
+import rainreuseMandatory from "@/public/images/landing/intro/rainreuse_mandatory.png";
+import rainwaterDesign from "@/public/images/landing/intro/rainwater_design.png";
+import rainwaterStandards from "@/public/images/landing/intro/rainwater_standards.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +64,7 @@ export default function RainwaterReusePage() {
       <section className="mt-6">
         <SectionTitle>빗물 재이용 소개</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
+          <ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
         </div>
       </section>
 
@@ -68,7 +74,7 @@ export default function RainwaterReusePage() {
       <section className="mt-6">
         <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
+          <ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
         </div>
       </section>
 
@@ -78,7 +84,7 @@ export default function RainwaterReusePage() {
       <section className="mt-6">
         <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
+          <ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
         </div>
       </section>
 
@@ -88,7 +94,7 @@ export default function RainwaterReusePage() {
       <section className="pb-[200px]">
         <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
+          <ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
         </div>
       </section>
 
diff --git a/apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx b/apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx
index 14e4582cb..e64299f70 100644
--- a/apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx
@@ -1,7 +1,10 @@
 // apps/dm/app/(landing)/reuse/intro/treated/page.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import SubPageHeader from "../../_components/SubPageHeader";
+import treatedwaterIntro from "@/public/images/landing/intro/treatedwater_intro.png";
+import treatedwaterMandatory from "@/public/images/landing/intro/treatedwater_mandatory.png";
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -21,17 +24,18 @@ function Hr({ className = "" }: HrProps) {
 }
 
 type ImgCardProps = {
-  src: string;
+  src: StaticImageData;
   alt: string;
 };
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
     <div className="w-full overflow-x-auto">
-      <img
+      <Image
         src={src}
         alt={alt}
         className="block mx-auto max-w-none"
+        style={{ width: "auto", height: "auto" }}
       />
     </div>
   );
@@ -58,7 +62,7 @@ export default function TreatedWaterPage() {
       <section className="mt-6">
         <SectionTitle>하수처리수</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수 설명" />
+          <ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
         </div>
       </section>
 
@@ -68,7 +72,7 @@ export default function TreatedWaterPage() {
       <section className="pb-[200px]">
         <SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
         <div className="mt-8">
-          <ImgCard src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상 설명" />
+          <ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
         </div>
       </section>
     </div>