diff --git a/.gitignore b/.gitignore
index bcf6dab44..ee2cfd052 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,4 +29,4 @@ settings.json
 .agent
 
 apps/**/tsconfig.tsbuildinfo
-logs/
\ No newline at end of file
+logs/
diff --git a/.husky/pre-push b/.husky/pre-push
index 929f5302d..2adeaead9 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1,7 +1,10 @@
 #!/bin/sh
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$BRANCH" != "main" ]; then
+  exit 0
+fi
 echo "Branch: $BRANCH"
 echo "Changed packages (dry-run):"
 pnpm turbo run build --filter="...[origin/$BRANCH]" --dry-run
 echo "Starting build..."
-pnpm turbo run build --filter="...[origin/$BRANCH]"
\ No newline at end of file
+pnpm turbo run build --filter="...[origin/$BRANCH]"
diff --git a/apps/dm_new/.env.local b/apps/dm_new/.env.local
index 62c4be2cc..58001643c 100644
--- a/apps/dm_new/.env.local
+++ b/apps/dm_new/.env.local
@@ -1,12 +1,13 @@
 NEXT_PUBLIC_SITE_ID = DN
+NEXT_PUBLIC_PORT = 3015
 NEXT_PUBLIC_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
-NEXT_PUBLIC_PORT = 3005
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3005
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 # NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
 NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
@@ -19,7 +20,6 @@ NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&ver
 NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
diff --git a/apps/dm_new/.env.mindone b/apps/dm_new/.env.mindone
index da6f80177..9a5005d2b 100644
--- a/apps/dm_new/.env.mindone
+++ b/apps/dm_new/.env.mindone
@@ -1,23 +1,25 @@
-NEXT_PUBLIC_SITE_ID = DM
-NEXT_PUBLIC_PORT = 11035
-NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+NEXT_PUBLIC_SITE_ID = DN
+NEXT_PUBLIC_PORT = 11315
 NEXT_PUBLIC_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11315
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
 NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+#NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
+#NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
+NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
 NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
diff --git a/apps/dm_new/.env.production b/apps/dm_new/.env.production
index 5a401c89a..b413d1312 100644
--- a/apps/dm_new/.env.production
+++ b/apps/dm_new/.env.production
@@ -1,5 +1,5 @@
 # 공단 운영
-NEXT_PUBLIC_SITE_ID = DM
+NEXT_PUBLIC_SITE_ID = DN
 NEXT_PUBLIC_PORT = 3000
 NEXT_PUBLIC_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
@@ -8,16 +8,16 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devreuse.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
 NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
-NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
+NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
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 4a33e7314..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";
@@ -29,7 +30,15 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
   const [openLabel, setOpenLabel] = useState<string | null>(defaultOpenLabel);
 
   return (
-    <aside className="w-[260px] min-w-[260px] shrink-0">
+    <aside
+        className={[
+        "fixed left-0 top-[83px]",                 // ✅ 화면 고정 + TopNav 아래로
+        "w-[260px] min-w-[260px] shrink-0",
+        "h-[calc(100vh-83px)]",                    // ✅ 남은 높이만큼
+        "overflow-y-auto",                         // ✅ LNB 내부 스크롤
+        "bg-white z-50",                           // ✅ 겹침 방지
+        ].join(" ")}
+    >
       {/* 타이틀 */}
       <div
         className="h-[120px] flex items-center justify-center
@@ -81,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/_hooks/useScrollSpy.ts b/apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts
index 3a253e95d..821e7e166 100644
--- a/apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts
+++ b/apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts
@@ -1,9 +1,22 @@
+/**
+ * IntersectionObserver로 각 section의 화면 노출 비율을 계산해서 가장 많이 보이는 section을 activeId로 만든다
+ */
 "use client";
 import { useEffect, useRef, useState } from "react";
 
+const DEFAULT_THRESHOLD = [0, 0.01, 0.1, 0.25, 0.5, 0.75];
+
 export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) {
   const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
   const ratiosRef = useRef<Map<string, number>>(new Map());
+  const activeIdRef = useRef(activeId);
+
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+
+  const threshold = options?.threshold ?? DEFAULT_THRESHOLD;
+  const thresholdKey = Array.isArray(threshold) ? threshold.join("|") : String(threshold);
 
   useEffect(() => {
     const els = sectionIds
@@ -26,7 +39,7 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
         }
 
         // ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로
-        let bestId = activeId;
+        let bestId = activeIdRef.current;
         let bestRatio = -1;
 
         for (const [id, ratio] of ratiosRef.current.entries()) {
@@ -39,17 +52,15 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
         if (bestId) setActiveId(bestId);
       },
       {
-        root: null,
-        threshold: [0, 0.01, 0.1, 0.25, 0.5, 0.75],
-        rootMargin: DEFAULT_ROOT_MARGIN,
-        ...options,
+        root: options?.root ?? null,
+        threshold,
+        rootMargin: options?.rootMargin ?? DEFAULT_ROOT_MARGIN,
       }
     );
 
     els.forEach((el) => io.observe(el));
     return () => io.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionIds.join("|"), options?.rootMargin, JSON.stringify(options?.threshold)]);
+  }, [sectionIds, options?.root, options?.rootMargin, threshold, thresholdKey]);
 
   return activeId;
 }
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/apply/modal/CandidateSiteModal.tsx b/apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
index aa5a9c0ee..75253392a 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
+++ b/apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
@@ -133,7 +133,7 @@ export default function CandidateSiteModal({
       />
 
       {/* panel */}
-      <div className="relative w-[94vw] max-w-[1400px] rounded-xl bg-white shadow-xl">
+      <div className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl">
         {/* header */}
         <div className="flex items-center justify-between px-8 py-6">
           <h2 className="text-2xl font-extrabold text-neutral-900">후보지 조회</h2>
diff --git a/apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx b/apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
new file mode 100644
index 000000000..f997d88e1
--- /dev/null
+++ b/apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
@@ -0,0 +1,539 @@
+// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달)
+"use client";
+
+import { useEffect, useMemo, useState, useId } from "react";
+import { createPortal } from "react-dom";
+
+type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose";
+
+export type SimilarCaseRow = {
+  caseId: string;
+  projectName: string;
+  period: string;
+
+  supplyFacilityType?: string;
+  supplyName?: string;
+  supplyCapacity?: number;
+
+  demandName?: string;
+  demandAddress?: string;
+
+  facilityCapacity?: number;
+  pipeKm?: number;
+  purpose?: string;
+
+  // 유사기준용
+  supplyAmt?: number; // 공급량(m3/일)
+  treatment?: string; // 처리공법
+  usePurpose?: string; // 이용용도
+};
+
+export type SimilarCaseDetail = {
+  // 보증수질
+  coliform?: string;
+  residualCl?: string;
+  turbidity?: string;
+  bod?: string;
+  odor?: string;
+  color?: string;
+  tn?: string;
+  tp?: string;
+  ph?: string;
+  chloride?: string;
+  ec?: string;
+  note?: string;
+
+  // 소요사업비(백만원) - 현재 타입에 있는 항목만 매핑
+  costTotal?: number;
+  costFacility?: number;
+  costPipe?: number;
+  costDesign?: number;
+  costSupervision?: number;
+  costOther?: number;
+
+  // 재원조달계획(백만원)
+  fundingTotal?: number;
+  fundingNational?: number;
+  fundingLocal?: number;
+  fundingSelf?: number;
+  fundingRate?: number; // %
+};
+
+function formatNumber(v: any) {
+  if (v === null || v === undefined || v === "" || Number.isNaN(Number(v))) return "-";
+  const n = typeof v === "number" ? v : Number(String(v).replaceAll(",", ""));
+  if (!Number.isFinite(n)) return "-";
+  return n.toLocaleString("ko-KR");
+}
+
+export default function SimilarCaseModal({
+  open,
+  onClose,
+  rows,
+  detailsByCaseId,
+}: {
+  open: boolean;
+  onClose: () => void;
+  rows: SimilarCaseRow[];
+  detailsByCaseId: Record<string, SimilarCaseDetail | undefined>;
+}) {
+  const titleId = useId();
+
+  const [mounted, setMounted] = useState(false);
+  const [criterion, setCriterion] = useState<Criterion>("");
+  const [selectedCaseId, setSelectedCaseId] = useState<string>("");
+
+  useEffect(() => setMounted(true), []);
+
+  // 모달 열릴 때 초기화
+  useEffect(() => {
+    if (!open) return;
+    setCriterion("");
+    setSelectedCaseId("");
+  }, [open]);
+
+  // ESC 닫기 + 배경 스크롤 잠금
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  const groupInfo = useMemo(() => {
+    const counts = new Map<string, number>();
+    rows.forEach((r) => counts.set(r.caseId, (counts.get(r.caseId) ?? 0) + 1));
+
+    const firstIndex = new Map<string, number>();
+    rows.forEach((r, idx) => {
+      if (!firstIndex.has(r.caseId)) firstIndex.set(r.caseId, idx);
+    });
+
+    return { counts, firstIndex };
+  }, [rows]);
+
+  const selectedDetail = selectedCaseId ? detailsByCaseId[selectedCaseId] : undefined;
+
+  // open 타입 방어
+  if (typeof open !== "boolean") {
+    console.error("SimilarCaseModal: open prop is not boolean:", open);
+    return null;
+  }
+
+
+  if (!open || !mounted) return null;
+
+  const tdBase =
+    "border border-[#C9C9C9] px-2 py-2 text-sm text-neutral-800 align-middle";
+  const thBase =
+    "border border-[#C9C9C9] bg-[#E7F4E2] px-2 py-2 text-sm font-semibold text-neutral-800 text-center align-middle";
+
+  const highlightTd = "bg-neutral-200";
+
+  const showList = criterion !== "";
+  const hasRows = rows.length > 0;
+
+  const ui = (
+    <div className="fixed inset-0 z-[1000] flex items-center justify-center">
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/30"
+        aria-label="모달 닫기"
+        onClick={onClose}
+      />
+
+      {/* panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl"
+      >
+        {/* header */}
+        <div className="flex items-center justify-between px-8 py-6">
+          <h2 id={titleId} className="text-2xl font-extrabold text-neutral-900">
+            유사사례 조회
+          </h2>
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-300"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="h-px w-full bg-neutral-200" />
+
+        {/* body */}
+        <div className="px-8 py-6">
+          {/* 상단 타이틀 + 유사기준 */}
+          <div className="mb-4 flex items-center justify-between">
+            <div className="text-lg font-semibold text-neutral-900">
+              물 재이용 사업 유사 사례
+            </div>
+
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-semibold text-neutral-800">유사기준</span>
+              <select
+                value={criterion}
+                onChange={(e) => {
+                  const v = e.target.value as Criterion;
+                  setCriterion(v);
+                  setSelectedCaseId("");
+                }}
+                className="h-10 w-[180px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+              >
+                <option value="">유사기준선택</option>
+                <option value="supplyAmt">공급량</option>
+                <option value="treatment">처리공법</option>
+                <option value="usePurpose">이용용도</option>
+              </select>
+            </div>
+          </div>
+
+          {/* 리스트 영역 */}
+          <div className="border border-[#C9C9C9] bg-white">
+            {!showList ? (
+              <div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
+                <div className="text-neutral-500">유사기준을 선택해주세요.</div>
+              </div>
+            ) : !hasRows ? (
+              <div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
+                <div className="text-neutral-500">조회 결과가 없습니다.</div>
+              </div>
+            ) : (
+              // 여기만 스크롤: rows가 4개/더 많아져서 높이를 넘으면 자동 스크롤 생성
+              <div className="max-h-[300px] overflow-y-auto overflow-x-auto">
+                <table className="w-full border-collapse">
+                  {/* thead sticky: bg + shadow + z-index로 겹침/투명 방지 */}
+                  <thead className="sticky top-0 z-20 bg-[#EAF5F5] shadow-sm">
+                    <tr>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        선택
+                      </th>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        사업명
+                      </th>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        사업기간
+                      </th>
+
+                      <th colSpan={3} className={`${thBase} bg-[#EAF5F5]`}>
+                        공급처
+                      </th>
+                      <th colSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        수요처
+                      </th>
+                      <th colSpan={6} className={`${thBase} bg-[#EAF5F5]`}>
+                        재이용시설
+                      </th>
+                    </tr>
+                    <tr>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>시설<br/>종류</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>공급처명</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        시설용량
+                        <br />
+                        (m³/일)
+                      </th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>수요처명</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>주소</th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        시설용량
+                        <br />
+                        (m³/일)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        관로
+                        <br />
+                        (km)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>용도</th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        공급량
+                        <br />
+                        (m³/일)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>처리공법</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>이용용도</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {rows.map((r, idx) => {
+                      const isFirst = groupInfo.firstIndex.get(r.caseId) === idx;
+                      const rowSpan = groupInfo.counts.get(r.caseId) ?? 1;
+                      const selected = selectedCaseId === r.caseId;
+
+                      const supplyAmtCls = criterion === "supplyAmt" ? highlightTd : "";
+                      const treatmentCls = criterion === "treatment" ? highlightTd : "";
+                      const usePurposeCls = criterion === "usePurpose" ? highlightTd : "";
+
+                      return (
+                        <tr
+                          key={`${r.caseId}-${idx}`}
+                          className={[
+                            "cursor-pointer hover:bg-neutral-50",
+                            selected ? "bg-sky-50" : "",
+                          ].join(" ")}
+                          onClick={() => setSelectedCaseId(r.caseId)}
+                        >
+                          {isFirst ? (
+                            <>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                <input
+                                  type="checkbox"
+                                  checked={selected}
+                                  readOnly
+                                  className="h-4 w-4"
+                                />
+                              </td>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                {r.projectName ?? "-"}
+                              </td>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                {r.period ?? "-"}
+                              </td>
+                            </>
+                          ) : null}
+
+                          <td className={`${tdBase} text-center`}>{r.supplyFacilityType ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{r.supplyName ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.supplyCapacity)}</td>
+
+                          <td className={`${tdBase} text-center`}>{r.demandName ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{r.demandAddress ?? "-"}</td>
+
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.facilityCapacity)}</td>
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.pipeKm)}</td>
+                          <td className={tdBase}>{r.purpose ?? "-"}</td>
+
+                          <td className={`${tdBase} text-center ${supplyAmtCls}`}>
+                            {formatNumber(r.supplyAmt)}
+                          </td>
+                          <td className={`${tdBase} text-center ${treatmentCls}`}>
+                            {r.treatment ?? "-"}
+                          </td>
+                          <td className={`${tdBase} text-center ${usePurposeCls}`}>
+                            {r.usePurpose ?? "-"}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          <hr className="my-6 border-y-[1px] border-[#C9C9C9]" />
+
+          {/* 상세정보 */}
+          <div className="mt-0">
+            <div className="mb-2 text-lg font-semibold text-neutral-900">상세정보</div>
+
+            {/* 1) 보증수질 */}
+            <div className="overflow-hidden border border-[#C9C9C9]">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr>
+                    <th colSpan={13} className={thBase}>
+                      보증수질
+                    </th>
+                  </tr>
+                  <tr>
+                    <th rowSpan={2} className={thBase}>
+                      총대장균군수<br />(개/100ml)
+                    </th>
+                    <th rowSpan={2} className={thBase}>
+                      용도별 결합 잔류염소<br />(mg/L)
+                    </th>
+                    <th rowSpan={2} className={thBase}>
+                      탁도<br />(NTU)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={thBase}>
+                      생물학적<br />산소요구량(BOD)(mg/L)
+                    </th>
+                    <th className={thBase}>냄새</th>
+                    <th className={thBase}>색도(도)</th>
+                    <th className={thBase}>총질소<br />(T-N)(mg/L)</th>
+                    <th className={thBase}>총인<br />(T-P)(mg/L)</th>
+                    <th className={thBase}>수소이온<br />농도(pH)</th>
+                    <th className={thBase}>염화물<br />(mgCL/L)</th>
+                    <th className={thBase}>전기전도도<br />(μs/cm)</th>
+                    <th className={thBase}>비고</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.coliform ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.residualCl ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.turbidity ?? "-"}</td>
+
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.bod ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.odor ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.color ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.tn ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.tp ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.ph ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.chloride ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.ec ?? "-"}</td>
+
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.note ?? "-"}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {/* 2) 사업비 */}
+            <div className="mt-4 overflow-hidden border border-[#C9C9C9]">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr>
+                    <th colSpan={14} className={thBase}>
+                      소요사업비(백만원)
+                    </th>
+                    <th colSpan={5} className={thBase}>
+                      재원조달계획(백만원)
+                    </th>
+                    <th colSpan={5} className={thBase}>
+                      사업비 정산(백만원)
+                    </th>
+                  </tr>
+
+                  <tr>
+                    {/* 소요사업비 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th colSpan={2} className={thBase}>토목</th>
+                    <th rowSpan={2} className={thBase}>건축</th>
+                    <th rowSpan={2} className={thBase}>기계</th>
+                    <th rowSpan={2} className={thBase}>전기<br />·계측</th>
+                    <th rowSpan={2} className={thBase}>GIS<br />DB</th>
+                    <th rowSpan={2} className={thBase}>CCTV</th>
+                    <th rowSpan={2} className={thBase}>시공 및 준공</th>
+                    <th rowSpan={2} className={thBase}>폐기물</th>
+                    <th rowSpan={2} className={thBase}>설계비</th>
+                    <th rowSpan={2} className={thBase}>감리비</th>
+                    <th rowSpan={2} className={thBase}>시설부대</th>
+                    <th rowSpan={2} className={thBase}>기타</th>
+
+                    {/* 재원조달 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th rowSpan={2} className={thBase}>국비</th>
+                    <th rowSpan={2} className={thBase}>지방비</th>
+                    <th rowSpan={2} className={thBase}>원인자부담</th>
+                    <th rowSpan={2} className={thBase}>국고비율</th>
+
+                    {/* 정산 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th rowSpan={2} className={thBase}>국비</th>
+                    <th rowSpan={2} className={thBase}>지방비</th>
+                    <th rowSpan={2} className={thBase}>원인자부담</th>
+                    <th rowSpan={2} className={thBase}>국고비율</th>
+                  </tr>
+
+                  <tr>
+                    <th className={thBase}>재이용<br />시설</th>
+                    <th className={thBase}>관로</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    {/* 소요사업비 */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costTotal != null ? formatNumber(selectedDetail.costTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costFacility != null ? formatNumber(selectedDetail.costFacility) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costPipe != null ? formatNumber(selectedDetail.costPipe) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costDesign != null ? formatNumber(selectedDetail.costDesign) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costSupervision != null ? formatNumber(selectedDetail.costSupervision) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costOther != null ? formatNumber(selectedDetail.costOther) : "-"}
+                    </td>
+
+                    {/* 재원조달 */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>
+                      {typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
+                    </td>
+
+                    {/* 정산(필드 없으면 동일 값 표시) */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>
+                      {typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {!selectedCaseId && showList ? (
+              <div className="mt-3 text-sm text-neutral-500">
+                리스트에서 사업을 선택하면 상세정보가 표시됩니다.
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(ui, document.body);
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx b/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
index a8a7297d3..2a9bbaf9a 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
@@ -1,10 +1,11 @@
-// apps/dm/app/(landing)/reuse/apply/register/page.tsx
+// apps/dm/app/(landing)/reuse/apply/register/page.tsx (수요정보등록 페이지)
 "use client";
 
 import { useMemo, useState, useRef } from "react";
 import SubPageHeader from "../../_components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";
 import CandidateSiteModal, { type CandidateSite } from "../modal/CandidateSiteModal";
+import SimilarCaseModal, { type SimilarCaseRow, type SimilarCaseDetail } from "../modal/SimilarCaseModal";
 
 type PHRange = { min: string; max: string };
 
@@ -22,6 +23,141 @@ export default function DemandRegisterPage() {
   const [openCand, setOpenCand] = useState(false);
   const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
 
+  // 유사사례 모달
+  const [openSimilar, setOpenSimilar] = useState(false);
+
+ // 유사사례 rows (목업) - API 연동 시 여기만 교체
+  // const rows: SimilarCaseRow[] = useMemo(
+  //   () => [
+  //     {
+  //       caseId: "C-001",
+  //       projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+  //       period: "2020.01. ~ 2025.05.",
+  //       supplyFacilityType: "중수도",
+  //       supplyName: "OO새교복지타운",
+  //       supplyCapacity: 0,
+  //       demandName: "OO새교복지타운",
+  //       demandAddress: "OO시 수청로 192",
+  //       facilityCapacity: 50,
+  //       pipeKm: 0,
+  //       purpose: "청소, 화장실, 조경",
+  //       supplyAmt: 50,
+  //       treatment: "MBLM",
+  //       usePurpose: "청소,화장실",
+  //     },
+  //     {
+  //       caseId: "C-001",
+  //       projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+  //       period: "2020.01. ~ 2025.05.",
+  //       supplyFacilityType: "중수도",
+  //       supplyName: "OO스포츠센터",
+  //       supplyCapacity: 0,
+  //       demandName: "OO스포츠센터",
+  //       demandAddress: "OO시 경기동로 33",
+  //       facilityCapacity: 50,
+  //       pipeKm: 0,
+  //       purpose: "청소, 화장실, 조경",
+  //       supplyAmt: 50,
+  //       treatment: "MBLM",
+  //       usePurpose: "청소,화장실",
+  //     },
+  //     {
+  //       caseId: "C-002",
+  //       projectName: "OO 엄성저수지 하수처리수 재이용사업",
+  //       period: "2019.12 ~ 2026.01",
+  //       supplyFacilityType: "하수",
+  //       supplyName: "OO 3,4단계 공공하수처리시설",
+  //       supplyCapacity: 70000,
+  //       demandName: "OO천",
+  //       demandAddress: "-",
+  //       facilityCapacity: 0,
+  //       pipeKm: 3,
+  //       purpose: "하천 등 유지용수",
+  //       supplyAmt: 2300,
+  //       treatment: "탈황,총인, 생물산화과,소독",
+  //       usePurpose: "하천 등 유지용수",
+  //     },
+  //     {
+  //       caseId: "C-002",
+  //       projectName: "OO 엄성저수지 하수처리수 재이용사업",
+  //       period: "2019.12 ~ 2026.01",
+  //       supplyFacilityType: "하수",
+  //       supplyName: "OO 3,4단계 공공하수처리시설",
+  //       supplyCapacity: 70000,
+  //       demandName: "OO저수지",
+  //       demandAddress: "-",
+  //       facilityCapacity: 0,
+  //       pipeKm: 5,
+  //       purpose: "하천 등 유지용수",
+  //       supplyAmt: 7700,
+  //       treatment: "탈황,총인, 생물산화과,소독",
+  //       usePurpose: "하천 등 유지용수",
+  //     },
+  //   ],
+  //   []
+  // );
+
+  // 유사사례 상세(목업) - caseId로 매핑
+  // const detailsByCaseId: Record<string, SimilarCaseDetail> = useMemo(
+  //   () => ({
+  //     "C-001": {
+  //       coliform: "불검출",
+  //       residualCl: "0.2이상",
+  //       turbidity: "1.5이하",
+  //       bod: "4.0이하",
+  //       odor: "불쾌하지않을것",
+  //       color: "10이하",
+  //       tn: "-",
+  //       tp: "-",
+  //       ph: "5.8~8.5",
+  //       chloride: "-",
+  //       ec: "-",
+  //       note: "-",
+
+  //       costTotal: 4305,
+  //       costFacility: 3518,
+  //       costPipe: undefined,
+  //       costDesign: 350,
+  //       costSupervision: 417,
+  //       costOther: 12,
+
+  //       fundingTotal: 4305,
+  //       fundingNational: 3104,
+  //       fundingLocal: 1291,
+  //       fundingSelf: undefined,
+  //       fundingRate: 70.0,
+  //     },
+  //     "C-002": {
+  //       coliform: "불검출",
+  //       residualCl: "0.15이상",
+  //       turbidity: "2.0이하",
+  //       bod: "5.0이하",
+  //       odor: "무",
+  //       color: "10이하",
+  //       tn: "-",
+  //       tp: "-",
+  //       ph: "6.0~8.5",
+  //       chloride: "-",
+  //       ec: "-",
+  //       note: "-",
+
+  //       costTotal: 9800,
+  //       costFacility: 2100,
+  //       costPipe: 1800,
+  //       costDesign: 300,
+  //       costSupervision: 280,
+  //       costOther: 1200,
+
+  //       fundingTotal: 9800,
+  //       fundingNational: 4900,
+  //       fundingLocal: 3000,
+  //       fundingSelf: 1900,
+  //       fundingRate: 50,
+  //     },
+  //   }),
+  //   []
+  // );
+
   // 기본정보
   const [reqDate, setReqDate] = useState<string>(today);
   const [reqQty, setReqQty] = useState<string>("");
@@ -49,264 +185,455 @@ export default function DemandRegisterPage() {
   const [cand2, setCand2] = useState("");
   const [cand3, setCand3] = useState("");
 
+  // 샘플 데이터
+  const similarRows: SimilarCaseRow[] = [
+  // ---------------- A (2행) ----------------
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO폐수재이용",
+    supplyCapacity: 50,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+  // A의 공급처 row 추가(=표 1행 추가) → 나머지 컬럼도 같이 채움
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO스포츠센터",
+    supplyCapacity: 30,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+
+  // ---------------- B (2행) ----------------
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설",
+    supplyCapacity: 70000,
+
+    demandName: "OO천",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 3,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 2300,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+  // B의 공급처 row 추가(=표 1행 추가)
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설(2라인)",
+    supplyCapacity: 70000,
+
+    demandName: "OO저수지",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 5,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 7700,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+
+  // ---------------- C (1행) ----------------
+  {
+    caseId: "C",
+    projectName: "OO 산업단지 공업용수 재이용사업",
+    period: "2021.03~2024.12",
+    supplyFacilityType: "하수",
+    supplyName: "OO공공하수처리장",
+    supplyCapacity: 15000,
+
+    demandName: "OO산업단지",
+    demandAddress: "OO시 산업로 25",
+
+    facilityCapacity: 5000,
+    pipeKm: 4,
+    purpose: "공업용수",
+    supplyAmt: 5000,
+    treatment: "UF + RO",
+    usePurpose: "공업용수",
+  },
+
+  // ---------------- D (1행) ----------------
+  {
+    caseId: "D",
+    projectName: "OO 공원 조경용수 재이용사업",
+    period: "2018.05~2022.11",
+    supplyFacilityType: "중수도",
+    supplyName: "OO정수장",
+    supplyCapacity: 8000,
+
+    demandName: "OO중앙공원",
+    demandAddress: "OO시 공원로 88",
+
+    facilityCapacity: 1200,
+    pipeKm: 2,
+    purpose: "조경용수",
+    supplyAmt: 1200,
+    treatment: "모래여과",
+    usePurpose: "조경",
+  },
+];
+
+  const similarDetailsByCaseId: Record<string, SimilarCaseDetail> = {
+    A: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    B: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+    C: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    D: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+  };
+
   return (
     <>
-    
-        <main className="bg-white">
-
-            {/* 서브 타이틀 + 브레드크럼 */}
-            <SubPageHeader
-                title="수요정보등록"
-                crumbs={[
-                { label: "Home", href: "/reuse" },
-                { label: "수요신청", href: "/reuse/apply" },
-                { label: "수요정보등록" },
-                ]}
-            />
-
-            {/* 컨텐츠 영역 */}
-            <div>
-
-                {/* 기본정보 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    <FormRow label="요구시기" required>
-                        <DateInput value={reqDate} onChange={setReqDate} />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="요구수량(m²/d)" required>
-                        <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="사용용도" required>
-                        <TextInput value={usePurpose} onChange={setUsePurpose} />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="희망단가(원)" required>
-                        <TextInput value={hopePrice} onChange={setHopePrice} />
-                    </FormRow>
-                </div>
-
-                {/* 요구수질 섹션 타이틀 바 */}
-                <div className="grid grid-cols-12">
-                    <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
-                        <span className="text-lg font-semibold text-neutral-800">요구수질</span>
-                        <button
-                            type="button"
-                             onClick={() => setOpenRef(true)}
-                            className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
-                        >
-                            수질기준 참고
-                        </button>
-                        {/* 수질기준참고 모달 */}
-                        <WaterQualityRefModal
-                            open={openRef}
-                            onClose={() => setOpenRef(false)}
-                            imageSrc="/images/landing/water_quality_ref_1.png"
-                        />
-                    </div>
-                </div>
-
-                {/* 요구수질 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    {/* 1행 */}
-                    <QualityRow
-                        leftLabel="총대장균군수(개/mg)"
-                        leftRequired
-                        leftControl={
-                        <div className="flex items-center gap-4">
-                            <TextInput
-                            value={coliform}
-                            onChange={setColiform}
-                            disabled={noDetect}
-                            className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
-                            />
-                            <label className="flex items-center gap-2 text-sm text-neutral-700">
-                            <input
-                                type="checkbox"
-                                checked={noDetect}
-                                onChange={(e) => {
-                                setNoDetect(e.target.checked);
-                                if (e.target.checked) setColiform("");
-                                }}
-                                className="h-4 w-4 rounded border-neutral-300"
-                            />
-                            불검출
-                            </label>
-                        </div>
-                        }
-                        rightLabel="총질소(T-N)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 2행 */}
-                    <QualityRow
-                        leftLabel="결합잔류염소(mg/L)"
-                        leftRequired
-                        leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
-                        rightLabel="총인(T-P)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 3행 */}
-                    <QualityRow
-                        leftLabel="탁도(NTU)"
-                        leftRequired
-                        leftControl={
-                        <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
-                        }
-                        rightLabel="수소이온농도(pH)"
-                        rightControl={
-                        <div className="flex items-center gap-2">
-                            <TextInput
-                            value={ph.min}
-                            onChange={(v) => setPh((p) => ({ ...p, min: v }))}
-                            className="w-32"
-                            />
-                            <span className="text-neutral-500">~</span>
-                            <TextInput
-                            value={ph.max}
-                            onChange={(v) => setPh((p) => ({ ...p, max: v }))}
-                            className="w-32"
-                            />
-                        </div>
-                        }
-                    />
-                    <Divider />
-
-                    {/* 4행 */}
-                    <QualityRow
-                        leftLabel={
-                        <>
-                            생물화학적산소요구량
-                            <br />
-                            (BOD)(mg/L)
-                        </>
-                        }
-                        leftRequired
-                        leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
-                        rightLabel="염화물(mgCL/L)"
-                        rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
-                    />
-                    <Divider />
-
-                    {/* 5행 */}
-                    <QualityRow
-                        leftLabel="냄새"
-                        leftRequired
-                        leftControl={
-                        <select
-                            value={odor}
-                            onChange={(e) => setOdor(e.target.value)}
-                            className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
-                        >
-                            <option>불쾌하지 않을 것</option>
-                            <option>약간 있음</option>
-                            <option>있음</option>
-                        </select>
-                        }
-                        rightLabel="전기전도도(µs/cm)"
-                        rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
-                    />
-                    <Divider />
-
-                    {/* 6행 */}
-                    <QualityRow
-                        leftLabel="색도(도)"
-                        leftRequired
-                        leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
-                        rightLabel="비고"
-                        rightControl={
-                        <textarea
-                            value={remark}
-                            onChange={(e) => setRemark(e.target.value)}
-                            className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
-                        />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 후보지 선택 */}
-                    <div className="grid grid-cols-12">
-                        <LabelCell>
-                        공급처 후보지 선택
-                        <br />
-                        (필수아님)
-                        </LabelCell>
-
-                        <div className="col-span-12 md:col-span-10 p-6">
-                            <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
-                                <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
-                                <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
-                                <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
-
-                                <div className="flex items-center gap-3 xl:ml-2">
-                                <button
-                                    type="button"
-                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
-                                    onClick={() => setOpenCand(true)}
-                                >
-                                    후보지 조회
-                                </button>
-                                <button
-                                    type="button"
-                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
-                                    onClick={() => {
-                                    // TODO: 유사사례 연결
-                                    console.log("유사사례");
-                                    }}
-                                >
-                                    유사사례
-                                </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* 하단 버튼 */}
-                <div className="flex justify-center py-12">
-                    <button
-                        type="button"
-                        className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
-                        onClick={() => {
-                        // TODO: 저장 처리
-                        console.log("수요정보 등록");
-                        }}
-                    >
-                        수요정보 등록
-                    </button>
-                </div>
-
-            </div>
-        </main>
-
-        <CandidateSiteModal
-            open={openCand}
-            onClose={() => setOpenCand(false)}
-            initialSelected={selectedCands}
-            onApply={(list) => {
-                setSelectedCands(list);
-
-                // ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
-                setCand1(list[0]?.name ?? "");
-                setCand2(list[1]?.name ?? "");
-                setCand3(list[2]?.name ?? "");
-
-                setOpenCand(false);
-            }}
+      <main className="bg-white">
+        <SubPageHeader
+          title="수요정보등록"
+          crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "수요신청", href: "/reuse/apply" },
+            { label: "수요정보등록" },
+          ]}
         />
+
+        <div>
+          <div className="border border-neutral-200 bg-white">
+            <FormRow label="요구시기" required>
+              <DateInput value={reqDate} onChange={setReqDate} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="요구수량(m²/d)" required>
+              <TextInput value={reqQty} onChange={setReqQty} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="사용용도" required>
+              <TextInput value={usePurpose} onChange={setUsePurpose} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="희망단가(원)" required>
+              <TextInput value={hopePrice} onChange={setHopePrice} />
+            </FormRow>
+          </div>
+
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 lg:col-span-2 inline-flex items-center justify-center gap-3 px-6 py-6 text-center">
+              <span className="text-lg font-semibold text-neutral-800">요구수질</span>
+              <button
+                type="button"
+                onClick={() => setOpenRef(true)}
+                className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
+              >
+                수질기준 참고
+              </button>
+
+              <WaterQualityRefModal
+                open={openRef}
+                onClose={() => setOpenRef(false)}
+                imageSrc="/images/landing/water_quality_ref_1.png"
+              />
+            </div>
+          </div>
+
+          <div className="border border-neutral-200 bg-white">
+            <QualityRow
+              leftLabel="총대장균군수(개/mg)"
+              leftRequired
+              leftControl={
+                <div className="flex items-center gap-4">
+                  <TextInput
+                    value={coliform}
+                    onChange={setColiform}
+                    disabled={noDetect}
+                    className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
+                  />
+                  <label className="flex items-center gap-2 text-sm text-neutral-700">
+                    <input
+                      type="checkbox"
+                      checked={noDetect}
+                      onChange={(e) => {
+                        setNoDetect(e.target.checked);
+                        if (e.target.checked) setColiform("");
+                      }}
+                      className="h-4 w-4 rounded border-neutral-300"
+                    />
+                    불검출
+                  </label>
+                </div>
+              }
+              rightLabel="총질소(T-N)(mg/L)"
+              rightControl={<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="결합잔류염소(mg/L)"
+              leftRequired
+              leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+              rightLabel="총인(T-P)(mg/L)"
+              rightControl={<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="탁도(NTU)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />}
+              rightLabel="수소이온농도(pH)"
+              rightControl={
+                <div className="flex items-center gap-2">
+                  <TextInput value={ph.min} onChange={(v) => setPh((p) => ({ ...p, min: v }))} className="w-32" />
+                  <span className="text-neutral-500">~</span>
+                  <TextInput value={ph.max} onChange={(v) => setPh((p) => ({ ...p, max: v }))} className="w-32" />
+                </div>
+              }
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel={
+                <>
+                  생물화학적산소요구량
+                  <br />
+                  (BOD)(mg/L)
+                </>
+              }
+              leftRequired
+              leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+              rightLabel="염화물(mgCL/L)"
+              rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="냄새"
+              leftRequired
+              leftControl={
+                <select
+                  value={odor}
+                  onChange={(e) => setOdor(e.target.value)}
+                  className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+                >
+                  <option>불쾌하지 않을 것</option>
+                  <option>약간 있음</option>
+                  <option>있음</option>
+                </select>
+              }
+              rightLabel="전기전도도(µs/cm)"
+              rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="색도(도)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
+              rightLabel="비고"
+              rightControl={
+                <textarea
+                  value={remark}
+                  onChange={(e) => setRemark(e.target.value)}
+                  className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
+                />
+              }
+            />
+            <Divider />
+
+            <div className="grid grid-cols-12">
+              <LabelCell>
+                공급처 후보지 선택
+                <br />
+                (필수아님)
+              </LabelCell>
+
+              <div className="col-span-12 md:col-span-10 p-6">
+                <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
+                  <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
+                  <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
+                  <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+
+                  <div className="flex items-center gap-3 xl:ml-2">
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenCand(true)}
+                    >
+                      후보지 조회
+                    </button>
+
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenSimilar(true)}
+                    >
+                      유사사례 조회
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-center py-12">
+            <button
+              type="button"
+              className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+              onClick={() => console.log("수요정보 등록")}
+            >
+              수요정보 등록
+            </button>
+          </div>
+        </div>
+      </main>
+
+      {/* 후보지 조회 모달 */}
+      <CandidateSiteModal
+        open={openCand}
+        onClose={() => setOpenCand(false)}
+        initialSelected={selectedCands}
+        onApply={(list) => {
+          setSelectedCands(list);
+          setCand1(list[0]?.name ?? "");
+          setCand2(list[1]?.name ?? "");
+          setCand3(list[2]?.name ?? "");
+          setOpenCand(false);
+        }}
+      />
+
+      {/* 유사사례 모달 */}
+      <SimilarCaseModal
+        open={openSimilar}
+        onClose={() => setOpenSimilar(false)}
+        rows={similarRows}
+        detailsByCaseId={similarDetailsByCaseId}
+      />
     </>
   );
 }
@@ -325,7 +652,7 @@ function LabelCell({
   required?: boolean;
 }) {
   return (
-    <div className="col-span-12 md:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+    <div className="col-span-12 md:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
       <span className="inline-flex items-center gap-1">
         {children}
         {required ? <span className="text-red-500">*</span> : null}
@@ -366,23 +693,19 @@ function QualityRow({
 }) {
   return (
     <div className="grid grid-cols-12">
-      {/* 좌측 라벨 */}
-      <div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
         <span className="inline-flex items-center gap-1">
           <span className="leading-6">{leftLabel}</span>
           {leftRequired ? <span className="text-red-500">*</span> : null}
         </span>
       </div>
 
-      {/* 좌측 입력 */}
       <div className="col-span-12 lg:col-span-4 p-6">{leftControl}</div>
 
-      {/* 우측 라벨 */}
-      <div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
         <span className="leading-6">{rightLabel}</span>
       </div>
 
-      {/* 우측 입력 */}
       <div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
     </div>
   );
@@ -441,23 +764,21 @@ function DateInput({
   value: string;
   onChange: (v: string) => void;
 }) {
-  
   const ref = useRef<HTMLInputElement | null>(null);
 
   const openPicker = () => {
     const el = ref.current;
     if (!el) return;
 
-    // Chrome/Edge 등 지원
     if (typeof (el as any).showPicker === "function") {
       (el as any).showPicker();
       return;
     }
 
-    // fallback (일부 브라우저)
     el.focus();
     el.click();
   };
+
   return (
     <div className="relative w-full max-w-[200px]">
       <input
@@ -467,7 +788,6 @@ function DateInput({
         onChange={(e) => onChange(e.target.value)}
         className={[
           "h-11 w-full rounded-md border border-neutral-300 bg-white px-3 pr-10 text-sm outline-none focus:border-neutral-500",
-          // ✅ 기본 달력 아이콘 숨김 (Tailwind arbitrary selector)
           "[&::-webkit-calendar-picker-indicator]:opacity-0",
           "[&::-webkit-calendar-picker-indicator]:absolute",
           "[&::-webkit-calendar-picker-indicator]:right-0",
@@ -477,7 +797,6 @@ function DateInput({
         ].join(" ")}
       />
 
-      {/* ✅ 클릭 가능한 아이콘 버튼 */}
       <button
         type="button"
         onClick={openPicker}
@@ -485,9 +804,15 @@ function DateInput({
         aria-label="달력 열기"
       >
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <path d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z" stroke="#1A1A1A" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+          <path
+            d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z"
+            stroke="#1A1A1A"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
         </svg>
       </button>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx b/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
index b7493f844..b69b0fdd9 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
@@ -227,7 +227,7 @@ export default function DemandStatusPage() {
                             return (
                             <tr
                                 key={r.id}
-                                role="button"
+                                role="row"
                                 tabIndex={0}
                                 onClick={() => onSelectRow(r.id)}
                                 onKeyDown={(e) => {
@@ -278,7 +278,7 @@ export default function DemandStatusPage() {
                 상세 정보를 표시할 신청건이 없습니다.
                 </div>
             ) : (
-                <div className="mt-3 border border-neutral-200">
+              <div className="mt-3 border border-neutral-200">
                 <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
                     요구수량
                 </div>
@@ -337,8 +337,30 @@ export default function DemandStatusPage() {
                         </div>
                     </div>
                     ))}
+
+                    {/* 수요신청 진행상태 */}
+                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
+                    수요신청 진행상태
+                    </div>
+
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        진행상태
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        {selected.status}
+                        </div>
+                    </div>
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        공급처매칭결과
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        
+                        </div>
+                    </div>
                 </div>
-                </div>
+              </div>
             )}
             </section>
         </div>
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>
diff --git a/apps/dm_new/app/(landing)/reuse/layout.tsx b/apps/dm_new/app/(landing)/reuse/layout.tsx
index d003de516..7574782c9 100644
--- a/apps/dm_new/app/(landing)/reuse/layout.tsx
+++ b/apps/dm_new/app/(landing)/reuse/layout.tsx
@@ -1,15 +1,19 @@
 // apps/dm/app/(landing)/reuse/layout.tsx
-import "./reuse.module.css";
-// import type { ReactNode } from "react";
-import TopNav from "./_components/TopNav";
+"use client";
+
+import "./reuse.module.css";
+
+import TopNav from "./_components/TopNav";
+import { usePathname } from "next/navigation";
+
+export default function ReuseLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const hasLnb = pathname !== "/reuse"; // 예: 메인만 제외
 
-export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <div className="min-w-[1800px] overflow-x-auto">
-        <TopNav />
-        <div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
-      </div>
-    </>
+    <div className="pt-[83px]">
+      {hasLnb && <TopNav />}
+      <main className={hasLnb ? "ml-[260px]" : ""}>{children}</main>
+    </div>
   );
 }
diff --git a/apps/dm_new/app/(landing)/reuse/page.tsx b/apps/dm_new/app/(landing)/reuse/page.tsx
index 442878365..ac6dcc9ac 100644
--- a/apps/dm_new/app/(landing)/reuse/page.tsx
+++ b/apps/dm_new/app/(landing)/reuse/page.tsx
@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/page.tsx
 "use client";
 
+import { useMemo } from "react";
 import TopNav from "./_components/TopNav";
 import SideIndicator from "./_components/SideIndicator";
 import { useScrollSpy } from "./_hooks/useScrollSpy";
@@ -30,7 +31,8 @@ const LANDING_SECTIONS = [
 ];
 
 export default function ReuseLandingPage() {
-  const activeId = useScrollSpy(LANDING_SECTIONS.map((s) => s.id));
+  const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
+  const activeId = useScrollSpy(sectionIds);
 
   return (
     <main className="bg-white">
diff --git a/apps/dm_new/app/(with-layout)/apply/register/page.tsx b/apps/dm_new/app/(with-layout)/apply/register/page.tsx
index c37912b97..3c084bf73 100644
--- a/apps/dm_new/app/(with-layout)/apply/register/page.tsx
+++ b/apps/dm_new/app/(with-layout)/apply/register/page.tsx
@@ -8,75 +8,14 @@
  */
 "use client";
 
-import { Suspense, useEffect, useMemo, useRef, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useDmStore } from "@/app/store";
-import type { DemandCompBizType } from "@/app/store/sdmMng";
-import { putFetch } from "@/components/ui/api";
+import { useMemo, useState, useRef } from "react";
 import SubPageHeader from "@/components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";
+import CandidateSiteModal, { type CandidateSite } from "@/components/CandidateSiteModal";
 
 type PHRange = { min: string; max: string };
-type SessionUser = {
-  dmdInfoId?: string;
-  dmdCoNm?: string;
-  ctpvCd?: string;
-  sggCd?: string;
-  zip?: string;
-  daddr?: string;
-  telno?: string;
-  rgtr?: string;
-};
-
-const toNumberOrNull = (value: string, disabled = false) => {
-  if (disabled) return null;
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-  const parsed = Number(trimmed);
-  return Number.isNaN(parsed) ? null : parsed;
-};
-
-const toNumberOrEmpty = (value: string) => {
-  const trimmed = value.trim();
-  if (!trimmed) return "" as const;
-  const parsed = Number(trimmed);
-  return Number.isNaN(parsed) ? ("" as const) : parsed;
-};
-
-const isNumeric = (value: string) => /^\d+(\.\d+)?$/.test(value.trim());
-
-const formatDateForInput = (raw?: string | null) => {
-  if (!raw) return "";
-  const parsed = new Date(raw);
-  if (Number.isNaN(parsed.getTime())) return "";
-  const yyyy = parsed.getFullYear();
-  const mm = String(parsed.getMonth() + 1).padStart(2, "0");
-  const dd = String(parsed.getDate()).padStart(2, "0");
-  return `${yyyy}-${mm}-${dd}`;
-};
-
-const parsePhRange = (raw?: string | null): PHRange => {
-  if (!raw) return { min: "", max: "" };
-  const [min = "", max = ""] = raw.split("~").map((v) => v.trim());
-  return { min, max };
-};
-
-const getSessionUser = (): SessionUser | null => {
-  if (typeof window === "undefined") return null;
-  const raw = sessionStorage.getItem("user");
-  if (!raw) return null;
-  try {
-    return JSON.parse(raw) as SessionUser;
-  } catch {
-    return null;
-  }
-};
-
-function DemandRegisterPageContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { insertSdmInfoData, Sdm } = useDmStore((state) => state);
 
+export default function DemandRegisterPage() {
   const today = useMemo(() => {
     const d = new Date();
     const yyyy = d.getFullYear();
@@ -86,486 +25,299 @@ function DemandRegisterPageContent() {
   }, []);
 
   const [openRef, setOpenRef] = useState(false);
-  const [editMode, setEditMode] = useState(false);
-  const [updateAllowed, setUpdateAllowed] = useState(true);
-  const [dmdInfoSn, setDmdInfoSn] = useState<number>(0);
-  const [submitting, setSubmitting] = useState(false);
+
+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
 
   // 기본정보
-  const [reqDate, setReqDate] = useState<string>(today);    // 요구시기
-  const [reqQty, setReqQty] = useState<string>("");         // 요구수량(m²/d)
-  const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
-  const [hopePrice, setHopePrice] = useState<string>("");   // 희망단가
-
+  const [reqDate, setReqDate] = useState<string>(today);
+  const [reqQty, setReqQty] = useState<string>("");
+  const [usePurpose, setUsePurpose] = useState<string>("");
+  const [hopePrice, setHopePrice] = useState<string>("");
 
   // 요구수질
-  const [coliform, setColiform] = useState<string>("");       // 총대장균군수(개/mg)
-  const [noDetect, setNoDetect] = useState<boolean>(false);   // 총대장균군수 불검출
-
-  const [tn, setTn] = useState<string>("");                   // 총질소(T-N)(mg/L)
-  const [residualCl, setResidualCl] = useState<string>("");   // 결합잔류염소(mg/L)
-  const [tp, setTp] = useState<string>("");                   // 총인(T-P)(mg/L)
-  const [turbidity, setTurbidity] = useState<string>("");      // 
-  const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
-  const [bod, setBod] = useState<string>("");                  // 생물화학적산소요구량(BOD)(mg/L)
-  const [chloride, setChloride] = useState<string>("");        // 염화물(mgCL/L)
-  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");  // 냄새
-  const [ec, setEc] = useState<string>("");                    // 전기전도도(µs/cm)
-  const [color, setColor] = useState<string>("");              // 색도(도)
-  const [remark, setRemark] = useState<string>("");            // 비고
+  const [coliform, setColiform] = useState<string>("");
+  const [noDetect, setNoDetect] = useState<boolean>(false);
 
+  const [tn, setTn] = useState<string>("");
+  const [residualCl, setResidualCl] = useState<string>("");
+  const [tp, setTp] = useState<string>("");
+  const [turbidity, setTurbidity] = useState<string>("");
+  const [ph, setPh] = useState<PHRange>({ min: "", max: "" });
+  const [bod, setBod] = useState<string>("");
+  const [chloride, setChloride] = useState<string>("");
+  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");
+  const [ec, setEc] = useState<string>("");
+  const [color, setColor] = useState<string>("");
+  const [remark, setRemark] = useState<string>("");
 
   // 공급처 후보지 선택(필수아님)
   const [cand1, setCand1] = useState("");
   const [cand2, setCand2] = useState("");
   const [cand3, setCand3] = useState("");
 
-  useEffect(() => {
-    const isEditParam =
-      searchParams.get("editMode") === "true" ||
-      Boolean(searchParams.get("dmdInfoSn"));
-    setEditMode(isEditParam);
-
-    const status = (searchParams.get("status") || "").trim();
-    setUpdateAllowed(!isEditParam || status === "신청");
-
-    if (!isEditParam) return;
-
-    const parsedSn = Number(searchParams.get("dmdInfoSn") || "0");
-    setDmdInfoSn(Number.isNaN(parsedSn) ? 0 : parsedSn);
-
-    setReqDate(formatDateForInput(searchParams.get("dmndTmng")) || today);
-    setReqQty(searchParams.get("dmndQty") || "");
-    setUsePurpose(searchParams.get("useUsgCd") || "");
-    setHopePrice(searchParams.get("wntUntprc") || "");
-
-    const rawColiform = searchParams.get("grssClfg") || "";
-    const isNoDetect = rawColiform === "-1";
-    setNoDetect(isNoDetect);
-    setColiform(isNoDetect ? "" : rawColiform);
-
-    setTn(searchParams.get("tn") || "");
-    setResidualCl(searchParams.get("combResdch") || "");
-    setTp(searchParams.get("tph") || "");
-    setTurbidity(searchParams.get("trbt") || "");
-    setBod(searchParams.get("blgcOxygDmndQnt") || "");
-    setChloride(searchParams.get("clIonQnt") || "");
-    setEc(searchParams.get("cdtnv") || "");
-    setColor(searchParams.get("crmty") || "");
-    setRemark(searchParams.get("rmrk") || "");
-
-    const phRange = parsePhRange(searchParams.get("ph"));
-    setPh(phRange);
-    setOdor(searchParams.get("smll") || "불쾌하지 않을 것");
-  }, [searchParams, today]);
-
-  const validate = () => {
-    const disabledFields = Sdm.disableRules[usePurpose] || [];
-    const isDisabled = (field: string) => disabledFields.includes(field);
-
-    if (!reqDate) {
-      alert("요구시기를 입력해주세요.");
-      return false;
-    }
-    if (!reqQty.trim()) {
-      alert("요구수량을 입력해주세요.");
-      return false;
-    }
-    if (!/^\d+$/.test(reqQty.trim())) {
-      alert("요구수량은 숫자만 입력 가능합니다.");
-      return false;
-    }
-    if (!usePurpose.trim()) {
-      alert("사용용도를 입력해주세요.");
-      return false;
-    }
-    if (!hopePrice.trim()) {
-      alert("희망단가를 입력해주세요.");
-      return false;
-    }
-    if (!/^\d+$/.test(hopePrice.trim())) {
-      alert("희망단가는 숫자만 입력 가능합니다.");
-      return false;
-    }
-    if (!noDetect && coliform.trim() && !isNumeric(coliform)) {
-      alert("총대장균군수는 숫자만 입력 가능합니다.");
-      return false;
-    }
-
-    const requiredFields: Array<{ key: string; label: string; value: string }> = [
-      { key: "tn", label: "총질소(T-N)(mg/L)", value: tn },
-      { key: "combResdch", label: "결합잔류염소(mg/L)", value: residualCl },
-      { key: "tph", label: "총인(T-P)(mg/L)", value: tp },
-      { key: "trbt", label: "탁도(NTU)", value: turbidity },
-      { key: "bod", label: "생물학적 산소요구량(BOD)(mg/L)", value: bod },
-      { key: "clIonQnt", label: "염화물(mgCL/L)", value: chloride },
-      { key: "smll", label: "냄새", value: odor },
-      { key: "cdtnv", label: "전기전도도(㎲/cm)", value: ec },
-      { key: "crmty", label: "색도(도)", value: color },
-    ];
-
-    for (const field of requiredFields) {
-      if (isDisabled(field.key)) continue;
-      if (!field.value.trim()) {
-        alert(`${field.label} 을 입력해주세요.`);
-        return false;
-      }
-      if (field.key !== "smll" && !isNumeric(field.value)) {
-        alert(`${field.label} 은 숫자만 입력 가능합니다.`);
-        return false;
-      }
-    }
-
-    if (!isDisabled("ph") && (!ph.min.trim() || !ph.max.trim())) {
-      alert("수소이온농도(pH) 을 입력해주세요.");
-      return false;
-    }
-
-    return true;
-  };
-
-  const onSubmit = async () => {
-    if (submitting) return;
-    if (!validate()) return;
-
-    if (editMode && !updateAllowed) {
-      alert("진행상태가 신청인 경우에만 수정할 수 있습니다.");
-      return;
-    }
-
-    const sessionUser = getSessionUser();
-    const idFromQuery =
-      (searchParams.get("dmdInfoId") || "") + (searchParams.get("bznmTotNo") || "");
-    const dmdInfoId = String(sessionUser?.dmdInfoId || idFromQuery || "").trim();
-
-    if (!dmdInfoId) {
-      alert("수요처 정보가 없어 저장할 수 없습니다.");
-      return;
-    }
-
-    const disabledFields = Sdm.disableRules[usePurpose] || [];
-    const isDisabled = (field: string) => disabledFields.includes(field);
-    const parsedPh = isDisabled("ph") ? "" : `${ph.min.trim()}~${ph.max.trim()}`;
-    const cands = [cand1, cand2, cand3]
-      .map((name) => name.trim())
-      .filter(Boolean)
-      .map((name) => ({
-        ruseUtztnFcltNm: name,
-        ruseUtztnFcltCd: "",
-      }))
-      .filter((item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd);
-
-    const payload: DemandCompBizType = {
-      index: 0,
-      dmdInfoId,
-      dmdInfoFk: dmdInfoId,
-      bzmnNo: "",
-      dmdCoNm: String(sessionUser?.dmdCoNm || searchParams.get("dmdCoNm") || ""),
-      zip: String(sessionUser?.zip || searchParams.get("zip") || ""),
-      daddr: String(sessionUser?.daddr || searchParams.get("daddr") || ""),
-      telno: String(sessionUser?.telno || searchParams.get("telno") || ""),
-      rgtr: String(sessionUser?.rgtr || searchParams.get("rgtr") || ""),
-      useUsgCd: usePurpose.trim(),
-      ctpvCd: String(sessionUser?.ctpvCd || searchParams.get("ctpvCd") || ""),
-      sggCd: String(sessionUser?.sggCd || searchParams.get("sggCd") || ""),
-      dmdAplyPswd: "",
-      wntUntprc: toNumberOrEmpty(hopePrice),
-      dmndTmng: reqDate ? new Date(reqDate) : "",
-      dmndQty: toNumberOrEmpty(reqQty),
-      grssClfg: noDetect ? -1 : toNumberOrNull(coliform),
-      tn: toNumberOrNull(tn, isDisabled("tn")),
-      combResdch: toNumberOrNull(residualCl, isDisabled("combResdch")),
-      tph: toNumberOrNull(tp, isDisabled("tph")),
-      trbt: toNumberOrNull(turbidity, isDisabled("trbt")),
-      ph: parsedPh,
-      blgcOxygDmndQnt: toNumberOrNull(bod, isDisabled("bod")),
-      clIonQnt: toNumberOrNull(chloride, isDisabled("clIonQnt")),
-      smll: isDisabled("smll") ? "" : odor.trim(),
-      cdtnv: toNumberOrNull(ec, isDisabled("cdtnv")),
-      crmty: toNumberOrNull(color, isDisabled("crmty")),
-      rmrk: remark.trim(),
-      reqDt: "",
-      dmdInfoSn: editMode ? dmdInfoSn : 0,
-      status: String(searchParams.get("status") || ""),
-      splyCndtList: cands,
-    };
-
-    try {
-      setSubmitting(true);
-      if (editMode) {
-        const updatePayload = {
-          ...payload,
-          mdfr: String(sessionUser?.rgtr || payload.rgtr || ""),
-        };
-        await putFetch("/reuseFc/request/demandInfo", updatePayload);
-        alert("수요정보 수정 완료!");
-      } else {
-        await insertSdmInfoData(payload);
-      }
-      router.push("/apply/status");
-    } catch (error) {
-      console.error("Failed to submit demand info", error);
-      alert(editMode ? "수요정보 수정에 실패하였습니다." : "수요정보 등록에 실패하였습니다.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
   return (
     <>
     
-      <main className="bg-white">
+        <main className="bg-white">
 
-        {/* 서브 타이틀 + 브레드크럼 */}
-        <SubPageHeader
-            title="수요정보등록"
-            crumbs={[
-            { label: "Home", href: "/main" },
-            { label: "수요신청", href: "/apply/status" },
-            { label: "수요정보등록" },
-            ]}
-        />
+            {/* 서브 타이틀 + 브레드크럼 */}
+            <SubPageHeader
+                title="수요정보등록"
+                crumbs={[
+                { label: "Home", href: "/reuse" },
+                { label: "수요신청", href: "/reuse/apply" },
+                { label: "수요정보등록" },
+                ]}
+            />
 
-        {/* 컨텐츠 영역 */}
-        <div>
+            {/* 컨텐츠 영역 */}
+            <div>
 
-            {/* 기본정보 테이블 */}
-            <div className="border border-neutral-200 bg-white">
-                <FormRow label="요구시기" required>
-                    <DateInput value={reqDate} onChange={setReqDate} />
-                </FormRow>
+                {/* 기본정보 테이블 */}
+                <div className="border border-neutral-200 bg-white">
+                    <FormRow label="요구시기" required>
+                        <DateInput value={reqDate} onChange={setReqDate} />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="요구수량(m²/d)" required>
-                    <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
-                </FormRow>
+                    <FormRow label="요구수량(m²/d)" required>
+                        <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="사용용도" required>
-                    <TextInput value={usePurpose} onChange={setUsePurpose} />
-                </FormRow>
+                    <FormRow label="사용용도" required>
+                        <TextInput value={usePurpose} onChange={setUsePurpose} />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="희망단가(원)" required>
-                    <TextInput value={hopePrice} onChange={setHopePrice} />
-                </FormRow>
-            </div>
-
-            {/* 요구수질 섹션 타이틀 바 */}
-            <div className="grid grid-cols-12">
-                <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
-                    <span className="text-lg font-semibold text-neutral-800">요구수질</span>
-                    <button
-                        type="button"
-                          onClick={() => setOpenRef(true)}
-                        className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
-                    >
-                        수질기준 참고
-                    </button>
-                    {/* 수질기준참고 모달 */}
-                    <WaterQualityRefModal
-                        open={openRef}
-                        onClose={() => setOpenRef(false)}
-                        imageSrc="/images/landing/water_quality_ref_1.png"
-                    />
+                    <FormRow label="희망단가(원)" required>
+                        <TextInput value={hopePrice} onChange={setHopePrice} />
+                    </FormRow>
                 </div>
-            </div>
 
-            {/* 요구수질 테이블 */}
-            <div className="border border-neutral-200 bg-white">
-                {/* 1행 */}
-                <QualityRow
-                    leftLabel="총대장균군수(개/mg)"
-                    leftRequired
-                    leftControl={
-                    <div className="flex items-center gap-4">
-                        <TextInput
-                        value={coliform}
-                        onChange={setColiform}
-                        disabled={noDetect}
-                        className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
-                        />
-                        <label className="flex items-center gap-2 text-sm text-neutral-700">
-                        <input
-                            type="checkbox"
-                            checked={noDetect}
-                            onChange={(e) => {
-                            setNoDetect(e.target.checked);
-                            if (e.target.checked) setColiform("");
-                            }}
-                            className="h-4 w-4 rounded border-neutral-300"
-                        />
-                        불검출
-                        </label>
-                    </div>
-                    }
-                    rightLabel="총질소(T-N)(mg/L)"
-                    rightControl={
-                    <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
-                    }
-                />
-                <Divider />
-
-                {/* 2행 */}
-                <QualityRow
-                    leftLabel="결합잔류염소(mg/L)"
-                    leftRequired
-                    leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
-                    rightLabel="총인(T-P)(mg/L)"
-                    rightControl={
-                    <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
-                    }
-                />
-                <Divider />
-
-                {/* 3행 */}
-                <QualityRow
-                    leftLabel="탁도(NTU)"
-                    leftRequired
-                    leftControl={
-                    <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
-                    }
-                    rightLabel="수소이온농도(pH)"
-                    rightControl={
-                    <div className="flex items-center gap-2">
-                        <TextInput
-                        value={ph.min}
-                        onChange={(v) => setPh((p) => ({ ...p, min: v }))}
-                        className="w-32"
-                        />
-                        <span className="text-neutral-500">~</span>
-                        <TextInput
-                        value={ph.max}
-                        onChange={(v) => setPh((p) => ({ ...p, max: v }))}
-                        className="w-32"
-                        />
-                    </div>
-                    }
-                />
-                <Divider />
-
-                {/* 4행 */}
-                <QualityRow
-                    leftLabel={
-                    <>
-                        생물화학적산소요구량
-                        <br />
-                        (BOD)(mg/L)
-                    </>
-                    }
-                    leftRequired
-                    leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
-                    rightLabel="염화물(mgCL/L)"
-                    rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
-                />
-                <Divider />
-
-                {/* 5행 */}
-                <QualityRow
-                    leftLabel="냄새"
-                    leftRequired
-                    leftControl={
-                    <select
-                        value={odor}
-                        onChange={(e) => setOdor(e.target.value)}
-                        className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
-                    >
-                        <option>불쾌하지 않을 것</option>
-                        <option>약간 있음</option>
-                        <option>있음</option>
-                    </select>
-                    }
-                    rightLabel="전기전도도(µs/cm)"
-                    rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
-                />
-                <Divider />
-
-                {/* 6행 */}
-                <QualityRow
-                    leftLabel="색도(도)"
-                    leftRequired
-                    leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
-                    rightLabel="비고"
-                    rightControl={
-                    <textarea
-                        value={remark}
-                        onChange={(e) => setRemark(e.target.value)}
-                        className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
-                    />
-                    }
-                />
-                <Divider />
-
-                {/* 후보지 선택 */}
+                {/* 요구수질 섹션 타이틀 바 */}
                 <div className="grid grid-cols-12">
-                    <LabelCell>
-                    공급처 후보지 선택
-                    <br />
-                    (필수아님)
-                    </LabelCell>
+                    <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
+                        <span className="text-lg font-semibold text-neutral-800">요구수질</span>
+                        <button
+                            type="button"
+                             onClick={() => setOpenRef(true)}
+                            className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
+                        >
+                            수질기준 참고
+                        </button>
+                        {/* 수질기준참고 모달 */}
+                        <WaterQualityRefModal
+                            open={openRef}
+                            onClose={() => setOpenRef(false)}
+                            imageSrc="/images/landing/water_quality_ref_1.png"
+                        />
+                    </div>
+                </div>
 
-                    <div className="col-span-12 md:col-span-10 p-6">
-                        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
-                            <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
-                            <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
-                            <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+                {/* 요구수질 테이블 */}
+                <div className="border border-neutral-200 bg-white">
+                    {/* 1행 */}
+                    <QualityRow
+                        leftLabel="총대장균군수(개/mg)"
+                        leftRequired
+                        leftControl={
+                        <div className="flex items-center gap-4">
+                            <TextInput
+                            value={coliform}
+                            onChange={setColiform}
+                            disabled={noDetect}
+                            className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
+                            />
+                            <label className="flex items-center gap-2 text-sm text-neutral-700">
+                            <input
+                                type="checkbox"
+                                checked={noDetect}
+                                onChange={(e) => {
+                                setNoDetect(e.target.checked);
+                                if (e.target.checked) setColiform("");
+                                }}
+                                className="h-4 w-4 rounded border-neutral-300"
+                            />
+                            불검출
+                            </label>
+                        </div>
+                        }
+                        rightLabel="총질소(T-N)(mg/L)"
+                        rightControl={
+                        <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
+                        }
+                    />
+                    <Divider />
 
-                            <div className="flex items-center gap-3 xl:ml-2">
-                            <button
-                                type="button"
-                                className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
-                                onClick={() => {
-                                // TODO: 후보지 조회 모달/검색 연결
-                                console.log("후보지 조회", { cand1, cand2, cand3 });
-                                }}
-                            >
-                                후보지 조회
-                            </button>
-                            <button
-                                type="button"
-                                className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
-                                onClick={() => {
-                                // TODO: 유사사례 연결
-                                console.log("유사사례");
-                                }}
-                            >
-                                유사사례
-                            </button>
+                    {/* 2행 */}
+                    <QualityRow
+                        leftLabel="결합잔류염소(mg/L)"
+                        leftRequired
+                        leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+                        rightLabel="총인(T-P)(mg/L)"
+                        rightControl={
+                        <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
+                        }
+                    />
+                    <Divider />
+
+                    {/* 3행 */}
+                    <QualityRow
+                        leftLabel="탁도(NTU)"
+                        leftRequired
+                        leftControl={
+                        <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
+                        }
+                        rightLabel="수소이온농도(pH)"
+                        rightControl={
+                        <div className="flex items-center gap-2">
+                            <TextInput
+                            value={ph.min}
+                            onChange={(v) => setPh((p) => ({ ...p, min: v }))}
+                            className="w-32"
+                            />
+                            <span className="text-neutral-500">~</span>
+                            <TextInput
+                            value={ph.max}
+                            onChange={(v) => setPh((p) => ({ ...p, max: v }))}
+                            className="w-32"
+                            />
+                        </div>
+                        }
+                    />
+                    <Divider />
+
+                    {/* 4행 */}
+                    <QualityRow
+                        leftLabel={
+                        <>
+                            생물화학적산소요구량
+                            <br />
+                            (BOD)(mg/L)
+                        </>
+                        }
+                        leftRequired
+                        leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+                        rightLabel="염화물(mgCL/L)"
+                        rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+                    />
+                    <Divider />
+
+                    {/* 5행 */}
+                    <QualityRow
+                        leftLabel="냄새"
+                        leftRequired
+                        leftControl={
+                        <select
+                            value={odor}
+                            onChange={(e) => setOdor(e.target.value)}
+                            className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+                        >
+                            <option>불쾌하지 않을 것</option>
+                            <option>약간 있음</option>
+                            <option>있음</option>
+                        </select>
+                        }
+                        rightLabel="전기전도도(µs/cm)"
+                        rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
+                    />
+                    <Divider />
+
+                    {/* 6행 */}
+                    <QualityRow
+                        leftLabel="색도(도)"
+                        leftRequired
+                        leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
+                        rightLabel="비고"
+                        rightControl={
+                        <textarea
+                            value={remark}
+                            onChange={(e) => setRemark(e.target.value)}
+                            className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
+                        />
+                        }
+                    />
+                    <Divider />
+
+                    {/* 후보지 선택 */}
+                    <div className="grid grid-cols-12">
+                        <LabelCell>
+                        공급처 후보지 선택
+                        <br />
+                        (필수아님)
+                        </LabelCell>
+
+                        <div className="col-span-12 md:col-span-10 p-6">
+                            <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
+                                <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
+                                <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
+                                <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+
+                                <div className="flex items-center gap-3 xl:ml-2">
+                                <button
+                                    type="button"
+                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                                    onClick={() => setOpenCand(true)}
+                                >
+                                    후보지 조회
+                                </button>
+                                <button
+                                    type="button"
+                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
+                                    onClick={() => {
+                                    // TODO: 유사사례 연결
+                                    console.log("유사사례");
+                                    }}
+                                >
+                                    유사사례
+                                </button>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            {/* 하단 버튼 */}
-            <div className="flex justify-center py-12">
-                <button
-                    type="button"
-                    disabled={submitting}
-                    className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
-                    onClick={onSubmit}
-                >
-                    {editMode ? "수요정보 수정" : "수요정보 등록"}
-                </button>
-            </div>
+                {/* 하단 버튼 */}
+                <div className="flex justify-center py-12">
+                    <button
+                        type="button"
+                        className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+                        onClick={() => {
+                        // TODO: 저장 처리
+                        console.log("수요정보 등록");
+                        }}
+                    >
+                        수요정보 등록
+                    </button>
+                </div>
 
-        </div>
-      </main>
+            </div>
+        </main>
+
+        <CandidateSiteModal
+            open={openCand}
+            onClose={() => setOpenCand(false)}
+            initialSelected={selectedCands}
+            onApply={(list) => {
+                setSelectedCands(list);
+
+                // ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
+                setCand1(list[0]?.name ?? "");
+                setCand2(list[1]?.name ?? "");
+                setCand3(list[2]?.name ?? "");
+
+                setOpenCand(false);
+            }}
+        />
     </>
   );
 }
 
-export default function DemandRegisterPage() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <DemandRegisterPageContent />
-    </Suspense>
-  );
-}
-
 /* ----------------------------- UI helpers ----------------------------- */
 
 function Divider() {
diff --git a/apps/dm_new/app/(with-layout)/apply/status/page.tsx b/apps/dm_new/app/(with-layout)/apply/status/page.tsx
index cb3210da7..fc9e61134 100644
--- a/apps/dm_new/app/(with-layout)/apply/status/page.tsx
+++ b/apps/dm_new/app/(with-layout)/apply/status/page.tsx
@@ -1,179 +1,157 @@
-// apps/dm/app/(landing)/reuse/apply/status/page.tsx
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import SubPageHeader from "@/components/SubPageHeader";
-
-type WaterDetail = {
-  toc: string;
-  bdo: string;
-  tn: string;
-  tp: string;
-  cl: string;
-  conductivity: string;
-  coliform: string;
-  turbidity: string;
-  odor: string;
-  color: string;
-  ph: string;
-  note: string;
-};
-
-type Row = {
-  id: number;
-  sido: string;
-  sigungu: string;
-  company: string;
-  address: string;
-  phone: string;
-  date: string;
-  status: "진행중" | "진행완료";
-  detail: {
-    reqDate: string;
-    reqQty: string;
-    usePurpose: string;
-    price: string;
-    water: WaterDetail;
-    candidates: [string, string, string];
-  };
-};
-
-const MOCK: Row[] = [
-  {
-    id: 1,
-    sido: "서울특별시",
-    sigungu: "금천구",
-    company: "서울워터솔루션(주)",
-    address: "서울특별시 금천구 가산디지털2로 119, 24층(가산동)",
-    phone: "010-0000-0000",
-    date: "2025-01-14",
-    status: "진행중",
-    detail: {
-      reqDate: "2025-02",
-      reqQty: "1,200",
-      usePurpose: "공업용수",
-      price: "350",
-      water: {
-        toc: "4",
-        bdo: "3",
-        tn: "10",
-        tp: "1.0",
-        cl: "120",
-        conductivity: "800",
-        coliform: "0",
-        turbidity: "2",
-        odor: "무",
-        color: "무",
-        ph: "7.2",
-        note: "-",
-      },
-      candidates: ["후보지1", "후보지2", "후보지3"],
-    },
-  },
-  {
-    id: 2,
-    sido: "제주특별자치도",
-    sigungu: "서귀포",
-    company: "회사명이 길어도괜찮지",
-    address: "제주특별자치도 서귀포시 천제연로 156, 3층 2호(색달동 1077호)",
-    phone: "010-0000-0000",
-    date: "2025-01-14",
-    status: "진행완료",
-    detail: {
-      reqDate: "2025-03",
-      reqQty: "800",
-      usePurpose: "조경용수",
-      price: "300",
-      water: {
-        toc: "5",
-        bdo: "4",
-        tn: "12",
-        tp: "1.2",
-        cl: "140",
-        conductivity: "900",
-        coliform: "0",
-        turbidity: "3",
-        odor: "무",
-        color: "무",
-        ph: "7.0",
-        note: "현장 협의",
-      },
-      candidates: ["후보지1", "후보지2", "후보지3"],
-    },
-  },
-];
-
-function StatusBadge({ v }: { v: Row["status"] }) {
-  const cls = v === "진행중" ? "text-red-600" : "text-lime-600";
-  return <span className={["font-medium", cls].join(" ")}>{v}</span>;
-}
+import { useDmStore } from "@/app/store";
+import type { DemandCompBizType } from "@/app/store/sdmMng";
 
 type TopField = { label: string; value: string; required?: boolean };
 type PairField = { label: string; value: string };
+type SessionUser = { dmdInfoId?: string };
+
+const formatDate = (value: string | Date | "" | undefined) => {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+};
+
+const formatValue = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return String(value);
+};
+
+const formatBelow = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "-";
+  if (Number(value) === -1) return "불검출";
+  return `${value} 이하`;
+};
+
+function StatusBadge({ v }: { v: string }) {
+  const cls = v === "신청" ? "text-red-600" : "text-lime-600";
+  return <span className={["font-medium", cls].join(" ")}>{v || "-"}</span>;
+}
 
 export default function DemandStatusPage() {
-  const rows = useMemo(() => MOCK, []);
+  const { getSdmInfoStatusList, Sdm, Common } = useDmStore((state) => state);
+  const { successLogin, sdmInfoStatusList } = Sdm;
+  const { selectSidoData, selectSigunData } = Common;
 
-  // ✅ rows가 빈 경우도 대비 (런타임 오류 방지)
-  const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
-
-  // ✅ 상세영역 스크롤 이동용
   const detailRef = useRef<HTMLDivElement | null>(null);
 
-  // ✅ selected 계산 안정화
-  const selected = useMemo(() => {
-    if (!rows.length) return null;
-    const found = rows.find((r) => r.id === selectedId);
-    return found ?? rows[0];
-  }, [rows, selectedId]);
+  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
+  const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
+  const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
 
-  // ✅ rows가 바뀌었는데 selectedId가 null이면 자동 첫번째 선택
   useEffect(() => {
-    const first = rows[0];
-    if (!first) return; // ✅ rows가 비어있으면 종료 (TS + 런타임 안전)
+    const user = sessionStorage.getItem("user");
+    if (user) {
+      setIsLoginStorageInfo(true);
+    }
+  }, []);
 
-    if (selectedId == null) setSelectedId(first.id);
-  }, [rows, selectedId]);
+  useEffect(() => {
+    if (!successLogin && !isLoginStorageInfo) return;
+
+    const user = sessionStorage.getItem("user");
+    if (!user) return;
+
+    try {
+      const userData = JSON.parse(user) as SessionUser;
+      const dmdInfoId = userData.dmdInfoId?.trim();
+      if (dmdInfoId) {
+        getSdmInfoStatusList(dmdInfoId);
+      }
+    } catch (error) {
+      console.error("Error parsing user data:", error);
+    }
+  }, [successLogin, isLoginStorageInfo, getSdmInfoStatusList]);
+
+  useEffect(() => {
+    const mappedList = sdmInfoStatusList.map((item) => ({
+      ...item,
+      ctpvCd: selectSidoData.find((sido) => sido.val === item.ctpvCd?.trim())?.text || item.ctpvCd,
+      sggCd: selectSigunData.find((sigun) => sigun.val === item.sggCd?.trim())?.text || item.sggCd,
+    }));
+
+    setTransformedSdmInfoStatusList(mappedList);
+  }, [sdmInfoStatusList, selectSidoData, selectSigunData]);
+
+  useEffect(() => {
+    const first = transformedSdmInfoStatusList[0];
+    if (!first) {
+      setSelectedDmdInfoSn(null);
+      return;
+    }
+
+    if (selectedDmdInfoSn == null) {
+      setSelectedDmdInfoSn(first.dmdInfoSn);
+      return;
+    }
+
+    const exists = transformedSdmInfoStatusList.some(
+      (item) => item.dmdInfoSn === selectedDmdInfoSn,
+    );
+    if (!exists) {
+      setSelectedDmdInfoSn(first.dmdInfoSn);
+    }
+  }, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
+
+  const selectedSdmInfoStatus = useMemo(() => {
+    if (!transformedSdmInfoStatusList.length) return null;
+    return (
+      transformedSdmInfoStatusList.find((item) => item.dmdInfoSn === selectedDmdInfoSn) ??
+      transformedSdmInfoStatusList[0]
+    );
+  }, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
 
-  // ✅ 상단 2행(요구시기/요구수량/사용용도/희망단가) - TS 안전하게 object로 구성
   const topFields: TopField[] = useMemo(() => {
-    if (!selected) return [];
-    return [
-      { label: "요구시기", value: selected.detail.reqDate, required: true },
-      { label: "요구수량(㎡/d)", value: selected.detail.reqQty },
-      { label: "사용용도", value: selected.detail.usePurpose },
-      { label: "희망단가(원)", value: selected.detail.price },
-    ];
-  }, [selected]);
+    if (!selectedSdmInfoStatus) return [];
+
+    return [
+      { label: "요구시기", value: formatDate(selectedSdmInfoStatus.dmndTmng), required: true },
+      { label: "요구수량(㎥/d)", value: formatValue(selectedSdmInfoStatus.dmndQty) },
+      { label: "사용용도", value: formatValue(selectedSdmInfoStatus.useUsgCd) },
+      { label: "희망단가(원/㎥)", value: formatValue(selectedSdmInfoStatus.wntUntprc) },
+    ];
+  }, [selectedSdmInfoStatus]);
 
-  // ✅ 수질 항목 - TS 안전
   const waterFields: PairField[] = useMemo(() => {
-    if (!selected) return [];
-    const w = selected.detail.water;
+    if (!selectedSdmInfoStatus) return [];
+
     return [
-      { label: "총대장균군수(개/100mℓ)", value: w.coliform },
-      { label: "결합잔류염소(mg/L)", value: "-" },
-      { label: "탁도(NTU)", value: w.turbidity },
+      { label: "총대장균군수(개/100mL)", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
+      { label: "결합잔류염소(mg/L)", value: formatBelow(selectedSdmInfoStatus.combResdch) },
+      { label: "탁도(NTU)", value: formatBelow(selectedSdmInfoStatus.trbt) },
 
-      { label: "생물화학적산소요구량(BOD)(mg/L)", value: w.bdo },
-      { label: "냄새", value: w.odor },
-      { label: "색도(도)", value: w.color },
+      { label: "생물학적산소요구량(BOD)(mg/L)", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
+      { label: "냄새", value: formatValue(selectedSdmInfoStatus.smll) },
+      { label: "색도(도)", value: formatBelow(selectedSdmInfoStatus.crmty) },
 
-      { label: "총질소(T-N)(mg/L)", value: w.tn },
-      { label: "총인(T-P)(mg/L)", value: w.tp },
-      { label: "수소이온농도(pH)", value: w.ph },
+      { label: "총질소(T-N)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tn) },
+      { label: "총인(T-P)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tph) },
+      { label: "수소이온농도(pH)", value: formatValue(selectedSdmInfoStatus.ph) },
 
-      { label: "염화물(mgCL/L)", value: w.cl },
-      { label: "전기전도도(µs/cm)", value: w.conductivity },
-      { label: "비고", value: w.note },
+      { label: "염화물(mgCL/L)", value: formatBelow(selectedSdmInfoStatus.clIonQnt) },
+      { label: "전기전도도(μS/cm)", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
+      { label: "비고", value: formatValue(selectedSdmInfoStatus.rmrk) },
     ];
-  }, [selected]);
+  }, [selectedSdmInfoStatus]);
 
-  const onSelectRow = (id: number) => {
-    setSelectedId(id);
+  const candidateNames = useMemo(() => {
+    const list = selectedSdmInfoStatus?.splyCndtList ?? [];
+    return [
+      list[0]?.ruseUtztnFcltNm ?? "",
+      list[1]?.ruseUtztnFcltNm ?? "",
+      list[2]?.ruseUtztnFcltNm ?? "",
+    ];
+  }, [selectedSdmInfoStatus]);
 
-    // ✅ “행 클릭 → 아래 상세로 보여짐” 체감 확실히: 상세영역으로 이동
-    // (사용자가 이미 아래를 보고 있다면 거의 움직이지 않음)
+  const onSelectSdmInfoStatus = (dmdInfoSn: number | "") => {
+    setSelectedDmdInfoSn(dmdInfoSn);
     requestAnimationFrame(() => {
       detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
     });
@@ -181,158 +159,182 @@ export default function DemandStatusPage() {
 
   return (
     <main className="bg-white">
-        {/* 서브 타이틀 + 브레드크럼 */}
-        <SubPageHeader
-            title="수요신청현황"
-            crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "수요신청", href: "/reuse/apply" },
-            { label: "수요신청현황" },
-            ]}
-            hideFooterLine
-            hideGuideText
-        />
+      <SubPageHeader
+        title="수요신청현황"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "수요신청", href: "/apply/status" },
+          { label: "수요신청현황" },
+        ]}
+        hideFooterLine
+        hideGuideText
+      />
 
-        {/* 컨텐츠 영역 */}
-        <div>
-            {/* 리스트 테이블 */}
-            <section className="mt-6">
-                <div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
+      <div>
+        <section className="mt-6">
+          <div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
 
-                <div className="mt-3 border border-neutral-200">
-                    <table className="w-full table-fixed">
-                    <thead className="bg-[#E7F4E2]">
-                        <tr className="text-sm text-slate-700">
-                        <th className="w-[60px] px-3 py-3 text-center">NO.</th>
-                        <th className="w-[120px] px-3 py-3 text-center">시도</th>
-                        <th className="w-[120px] px-3 py-3 text-center">시군구</th>
-                        <th className="w-[180px] px-3 py-3 text-center">회사명</th>
-                        <th className="px-3 py-3 text-center">공장주소</th>
-                        <th className="w-[140px] px-3 py-3 text-center">전화번호</th>
-                        <th className="w-[120px] px-3 py-3 text-center">신청일자</th>
-                        <th className="w-[110px] px-3 py-3 text-center">진행상태</th>
-                        </tr>
-                    </thead>
+          <div className="mt-3 border border-neutral-200">
+            <table className="w-full table-fixed">
+              <thead className="bg-[#E7F4E2]">
+                <tr className="text-sm text-slate-700">
+                  <th className="w-[60px] px-3 py-3 text-center">NO.</th>
+                  <th className="w-[120px] px-3 py-3 text-center">시도</th>
+                  <th className="w-[120px] px-3 py-3 text-center">시군구</th>
+                  <th className="w-[180px] px-3 py-3 text-center">회사명</th>
+                  <th className="px-3 py-3 text-center">공장주소</th>
+                  <th className="w-[140px] px-3 py-3 text-center">전화번호</th>
+                  <th className="w-[120px] px-3 py-3 text-center">신청일자</th>
+                  <th className="w-[110px] px-3 py-3 text-center">진행상태</th>
+                </tr>
+              </thead>
 
-                    <tbody className="bg-white text-base text-slate-700">
-                        {rows.length === 0 ? (
-                        <tr>
-                            <td colSpan={8} className="px-3 py-10 text-center text-slate-400">
-                            조회된 신청내역이 없습니다.
-                            </td>
-                        </tr>
-                        ) : (
-                        rows.map((r) => {
-                            const active = r.id === selected?.id;
-                            return (
-                            <tr
-                                key={r.id}
-                                role="button"
-                                tabIndex={0}
-                                onClick={() => onSelectRow(r.id)}
-                                onKeyDown={(e) => {
-                                if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
-                                }}
-                                className={[
-                                "border-t border-neutral-200 outline-none",
-                                "cursor-pointer",
-                                active ? "bg-slate-50" : "hover:bg-slate-50",
-                                "focus-visible:ring-2 focus-visible:ring-slate-300",
-                                ].join(" ")}
-                                aria-selected={active}
-                            >
-                                <td className="px-3 py-3 text-center">{r.id}</td>
-                                <td className="px-3 py-3 text-center">{r.sido}</td>
-                                <td className="px-3 py-3 text-center">{r.sigungu}</td>
-                                <td className="px-3 py-3 text-center">{r.company}</td>
-                                <td className="px-3 py-3 text-center">{r.address}</td>
-                                <td className="px-3 py-3 text-center">{r.phone}</td>
-                                <td className="px-3 py-3 text-center">{r.date}</td>
-                                <td className="px-3 py-3 text-center">
-                                <StatusBadge v={r.status} />
-                                </td>
-                            </tr>
-                            );
-                        })
-                        )}
-                    </tbody>
-                    </table>
-                </div>
-            </section>
+              <tbody className="bg-white text-base text-slate-700">
+                {transformedSdmInfoStatusList.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="px-3 py-10 text-center text-slate-400">
+                      조회된 신청내역이 없습니다.
+                    </td>
+                  </tr>
+                ) : (
+                  transformedSdmInfoStatusList.map((sdmInfoStatus, index) => {
+                    const active = sdmInfoStatus.dmdInfoSn === selectedSdmInfoStatus?.dmdInfoSn;
+                    return (
+                      <tr
+                        key={`${sdmInfoStatus.dmdInfoSn}-${index}`}
+                        role="row"
+                        tabIndex={0}
+                        onClick={() => onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn);
+                          }
+                        }}
+                        className={[
+                          "border-t border-neutral-200 outline-none",
+                          "cursor-pointer",
+                          active ? "bg-slate-50" : "hover:bg-slate-50",
+                          "focus-visible:ring-2 focus-visible:ring-slate-300",
+                        ].join(" ")}
+                        aria-selected={active}
+                      >
+                        <td className="px-3 py-3 text-center">{sdmInfoStatus.index || index + 1}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.ctpvCd)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.sggCd)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.dmdCoNm)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.daddr)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.telno)}</td>
+                        <td className="px-3 py-3 text-center">{formatDate(sdmInfoStatus.dmndTmng)}</td>
+                        <td className="px-3 py-3 text-center">
+                          <StatusBadge v={formatValue(sdmInfoStatus.status)} />
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </section>
 
-            {/* 상세현황 */}
-            <section className="mt-10 pb-16" ref={detailRef}>
+        <section className="mt-10 pb-16" ref={detailRef}>
+          <div className="flex justify-between items-center">
             <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+            <button
+              type="button"
+              className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+            >
+              수정
+            </button>
+          </div>
 
-            {!selected ? (
-                <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
-                상세 정보를 표시할 신청건이 없습니다.
-                </div>
-            ) : (
-                <div className="mt-3 border border-neutral-200">
-                <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    요구수량
+          {!selectedSdmInfoStatus ? (
+            <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
+              상세 정보를 표시할 신청건이 없습니다.
+            </div>
+          ) : (
+            <div className="mt-3 border border-neutral-200">
+              <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                요구수량
+              </div>
+
+              <div className="grid grid-cols-12 text-sm">
+                {topFields.map((field) => (
+                  <div
+                    key={field.label}
+                    className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
+                  >
+                    <div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      {field.label}
+                      {field.required ? <span className="ml-1 text-red-500">*</span> : null}
+                    </div>
+                    <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
+                      {field.value}
+                    </div>
+                  </div>
+                ))}
+
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                  요구수질
                 </div>
 
-                <div className="grid grid-cols-12 text-sm">
-                    {/* 상단 2행 */}
-                    {topFields.map((f) => (
-                    <div
-                        key={f.label}
-                        className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
-                    >
-                        <div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        {f.label}
-                        {f.required ? <span className="ml-1 text-red-500">*</span> : null}
-                        </div>
-                        <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
-                        {f.value}
-                        </div>
+                {waterFields.map((field) => (
+                  <div
+                    key={field.label}
+                    className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
+                  >
+                    <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      {field.label}
                     </div>
-                    ))}
+                    <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                      {field.value}
+                    </div>
+                  </div>
+                ))}
 
-                    {/* 수질 */}
-                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    요구수질
-                    </div>
-
-                    {waterFields.map((f) => (
-                    <div
-                        key={f.label}
-                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
-                    >
-                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        {f.label}
-                        </div>
-                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {f.value}
-                        </div>
-                    </div>
-                    ))}
-
-                    {/* 공급처 후보지 */}
-                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    공급처 후보지
-                    </div>
-
-                    {selected.detail.candidates.map((v, i) => (
-                    <div
-                        key={`candidate-${i}`}
-                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
-                    >
-                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        후보지{i + 1}
-                        </div>
-                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {v}
-                        </div>
-                    </div>
-                    ))}
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                  공급처 후보지
                 </div>
+
+                {candidateNames.map((candidateName, index) => (
+                  <div
+                    key={`candidate-${index}`}
+                    className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
+                  >
+                    <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      후보지{index + 1}
+                    </div>
+                    <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                      {candidateName}
+                    </div>
+                  </div>
+                ))}
+
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
+                  수요신청 진행상태
                 </div>
-            )}
-            </section>
-        </div>
+
+                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                    진행상태
+                  </div>
+                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                    {formatValue(selectedSdmInfoStatus.status)}
+                  </div>
+                </div>
+                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                    공급처매칭결과
+                  </div>
+                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                    {formatValue(selectedSdmInfoStatus.ruseUtztnFcltNm)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
     </main>
   );
 }
diff --git a/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx b/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
index 54f4ef682..fec020ece 100644
--- a/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
+++ b/apps/dm_new/app/(with-layout)/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/(with-layout)/intro/law/page.tsx b/apps/dm_new/app/(with-layout)/intro/law/page.tsx
index 32728806b..0d903a32a 100644
--- a/apps/dm_new/app/(with-layout)/intro/law/page.tsx
+++ b/apps/dm_new/app/(with-layout)/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/(with-layout)/intro/layout.tsx b/apps/dm_new/app/(with-layout)/intro/layout.tsx
index 91e9e2e54..e025f4c80 100644
--- a/apps/dm_new/app/(with-layout)/intro/layout.tsx
+++ b/apps/dm_new/app/(with-layout)/intro/layout.tsx
@@ -5,7 +5,9 @@ export default function IntroLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex gap-0">
       <Lnb />
-      <main className="flex-1 px-[100px] pt-[80px]">{children}</main>
+      <main className="flex-1 px-[100px] pt-[80px]">
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/apps/dm_new/app/(with-layout)/intro/rain/page.tsx b/apps/dm_new/app/(with-layout)/intro/rain/page.tsx
index 0fc3b1de9..3f88d7f58 100644
--- a/apps/dm_new/app/(with-layout)/intro/rain/page.tsx
+++ b/apps/dm_new/app/(with-layout)/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>
     </div>
diff --git a/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx b/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
index c6e355ed9..526fd4e9c 100644
--- a/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
+++ b/apps/dm_new/app/(with-layout)/intro/sewage/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>
diff --git a/apps/dm_new/app/(with-layout)/layout.tsx b/apps/dm_new/app/(with-layout)/layout.tsx
index 7ea176c6d..2c31919bc 100644
--- a/apps/dm_new/app/(with-layout)/layout.tsx
+++ b/apps/dm_new/app/(with-layout)/layout.tsx
@@ -1,13 +1,19 @@
 // app/(with-layout)/layout.tsx
+/**
+ * 메인을 제외한 메뉴안 페이지의 layout
+ */
+
 import "../reuse.module.css";
 import { StoreProvider } from "../store";
 import TopNav from "@/components/TopNav";
 
-export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
+export default function WithLayout({ children }: { children: React.ReactNode }) {
   return (
     <StoreProvider>
-      <TopNav />
-      <div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
+      <div className="pt-[83px]">{/* TopNav 높이만큼 */}
+        <TopNav />
+        <main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
+      </div> 
     </StoreProvider>
   );
 }
diff --git a/apps/dm_new/app/(with-layout)/status/greywater/page.tsx b/apps/dm_new/app/(with-layout)/status/greywater/page.tsx
index 37d958045..b84a6760d 100644
--- a/apps/dm_new/app/(with-layout)/status/greywater/page.tsx
+++ b/apps/dm_new/app/(with-layout)/status/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/(with-layout)/status/rain/page.tsx b/apps/dm_new/app/(with-layout)/status/rain/page.tsx
index 810053f52..aa33147f0 100644
--- a/apps/dm_new/app/(with-layout)/status/rain/page.tsx
+++ b/apps/dm_new/app/(with-layout)/status/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/(with-layout)/status/sewage/page.tsx b/apps/dm_new/app/(with-layout)/status/sewage/page.tsx
index 21b3a5bcf..19214da02 100644
--- a/apps/dm_new/app/(with-layout)/status/sewage/page.tsx
+++ b/apps/dm_new/app/(with-layout)/status/sewage/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/main/_hooks/useScrollSpy.ts b/apps/dm_new/app/main/_hooks/useScrollSpy.ts
index 3a253e95d..8274f277d 100644
--- a/apps/dm_new/app/main/_hooks/useScrollSpy.ts
+++ b/apps/dm_new/app/main/_hooks/useScrollSpy.ts
@@ -1,9 +1,19 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 
+const DEFAULT_THRESHOLD = [0, 0.01, 0.1, 0.25, 0.5, 0.75];
+
 export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) {
   const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
   const ratiosRef = useRef<Map<string, number>>(new Map());
+  const activeIdRef = useRef(activeId);
+
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+
+  const threshold = options?.threshold ?? DEFAULT_THRESHOLD;
+  const thresholdKey = Array.isArray(threshold) ? threshold.join("|") : String(threshold);
 
   useEffect(() => {
     const els = sectionIds
@@ -26,7 +36,7 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
         }
 
         // ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로
-        let bestId = activeId;
+        let bestId = activeIdRef.current;
         let bestRatio = -1;
 
         for (const [id, ratio] of ratiosRef.current.entries()) {
@@ -39,17 +49,15 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
         if (bestId) setActiveId(bestId);
       },
       {
-        root: null,
-        threshold: [0, 0.01, 0.1, 0.25, 0.5, 0.75],
-        rootMargin: DEFAULT_ROOT_MARGIN,
-        ...options,
+        root: options?.root ?? null,
+        threshold,
+        rootMargin: options?.rootMargin ?? DEFAULT_ROOT_MARGIN,
       }
     );
 
     els.forEach((el) => io.observe(el));
     return () => io.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionIds.join("|"), options?.rootMargin, JSON.stringify(options?.threshold)]);
+  }, [sectionIds, options?.root, options?.rootMargin, threshold, thresholdKey]);
 
   return activeId;
 }
diff --git a/apps/dm_new/app/main/_sections/Cases.tsx b/apps/dm_new/app/main/_sections/Cases.tsx
index 077d05cfe..757950369 100644
--- a/apps/dm_new/app/main/_sections/Cases.tsx
+++ b/apps/dm_new/app/main/_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/main/_sections/Hero.tsx b/apps/dm_new/app/main/_sections/Hero.tsx
index 47f939aec..fa3c525de 100644
--- a/apps/dm_new/app/main/_sections/Hero.tsx
+++ b/apps/dm_new/app/main/_sections/Hero.tsx
@@ -1,4 +1,5 @@
 // app/main/_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/main/_sections/IntroCards.tsx b/apps/dm_new/app/main/_sections/IntroCards.tsx
index e7153d721..c8c69ad7b 100644
--- a/apps/dm_new/app/main/_sections/IntroCards.tsx
+++ b/apps/dm_new/app/main/_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/main/page.tsx b/apps/dm_new/app/main/page.tsx
index cab0e2658..2ab2b3c7f 100644
--- a/apps/dm_new/app/main/page.tsx
+++ b/apps/dm_new/app/main/page.tsx
@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/page.tsx
 "use client";
 
+import { useMemo } from "react";
 import TopNav from "@/components/TopNav";
 import SideIndicator from "./SideIndicator";
 import { useScrollSpy } from "./_hooks/useScrollSpy";
@@ -30,7 +31,8 @@ const LANDING_SECTIONS = [
 ];
 
 export default function ReuseLandingPage() {
-  const activeId = useScrollSpy(LANDING_SECTIONS.map((s) => s.id));
+  const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
+  const activeId = useScrollSpy(sectionIds);
 
   return (
     <main className="bg-white">
diff --git a/apps/dm_new/components/CandidateSiteModal.tsx b/apps/dm_new/components/CandidateSiteModal.tsx
new file mode 100644
index 000000000..aa5a9c0ee
--- /dev/null
+++ b/apps/dm_new/components/CandidateSiteModal.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+export type CandidateSite = {
+  id: string;
+  name: string;
+  sewageM3d: number; // 하수처리량
+  reuseM3d: number; // 재이용량
+  // 지도 연동 시 사용(현재는 UI/구조용)
+  lat?: number;
+  lng?: number;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onApply: (selected: CandidateSite[]) => void;
+  initialSelected?: CandidateSite[];
+  maxSelect?: number; // 기본 3개
+};
+
+const MOCK_SITES: CandidateSite[] = [
+  { id: "1", name: "서호생태 수자원 재이용1", sewageM3d: 1300, reuseM3d: 1300, lat: 35.0, lng: 128.0 },
+  { id: "2", name: "서호생태 수자원 재이용2", sewageM3d: 1300, reuseM3d: 1300, lat: 35.01, lng: 128.01 },
+  { id: "3", name: "서호생태 수자원 재이용3", sewageM3d: 1300, reuseM3d: 1300, lat: 35.02, lng: 128.02 },
+];
+
+export default function CandidateSiteModal({
+  open,
+  onClose,
+  onApply,
+  initialSelected = [],
+  maxSelect = 3,
+}: Props) {
+  const [q, setQ] = useState("");
+  const [selected, setSelected] = useState<CandidateSite[]>(initialSelected);
+
+    // 지도 마커 컴포넌트
+    function MapMarker({ label }: { label?: string }) {
+    return (
+        <div className="relative -translate-x-1/2 -translate-y-full">
+            <svg width="72" height="66" viewBox="0 0 72 92">
+                <defs>
+                <linearGradient id="pinGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#2EDAA0" />
+                    <stop offset="100%" stopColor="#02A7D8" />
+                </linearGradient>
+
+                <filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
+                    <feDropShadow dx="0" dy="2" stdDeviation="2" floodColor="#000" floodOpacity="0.18" />
+                </filter>
+                </defs>
+
+                {/* pin body */}
+                <path
+                    filter="url(#pinShadow)"
+                    d="M36 2C21 2 9 14 9 29c0 22 24 50 26.4 52.7a2 2 0 0 0 3.2 0C40.9 79 63 51 63 29 63 14 51 2 36 2z"
+                    fill="url(#pinGrad)"
+                />
+
+                {/* 내부 흰 원 */}
+                <circle cx="36" cy="29" r="20" fill="#FFFFFF" />
+
+                {label && (
+                <text
+                    x="36"
+                    y="36"
+                    textAnchor="middle"
+                    fontSize="18"
+                    fontWeight="700"
+                    fill="#1F2937"
+                >
+                    {label}
+                </text>
+                )}
+            </svg>
+        </div>
+    );
+  }
+
+  // 모달 열릴 때마다 초기 선택값 동기화
+  useEffect(() => {
+    if (open) setSelected(initialSelected);
+    if (open) setQ("");
+  }, [open, initialSelected]);
+
+  // ESC 닫기
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  const filtered = useMemo(() => {
+    const keyword = q.trim();
+    if (!keyword) return MOCK_SITES;
+    return MOCK_SITES.filter((s) => s.name.includes(keyword));
+  }, [q]);
+
+  const isSelected = (id: string) => selected.some((s) => s.id === id);
+
+  const toggleSelect = (item: CandidateSite) => {
+    setSelected((prev) => {
+      const exists = prev.some((p) => p.id === item.id);
+      if (exists) return prev.filter((p) => p.id !== item.id);
+
+      if (prev.length >= maxSelect) return prev; // 최대 개수 초과 방지
+      return [...prev, item];
+    });
+  };
+
+  const removeChip = (id: string) => setSelected((prev) => prev.filter((p) => p.id !== id));
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[1000] flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label="후보지 조회"
+    >
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/30"
+        aria-label="모달 닫기"
+        onClick={onClose}
+      />
+
+      {/* panel */}
+      <div className="relative w-[94vw] max-w-[1400px] rounded-xl bg-white shadow-xl">
+        {/* header */}
+        <div className="flex items-center justify-between px-8 py-6">
+          <h2 className="text-2xl font-extrabold text-neutral-900">후보지 조회</h2>
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="h-px w-full bg-neutral-200" />
+
+        {/* body */}
+        <div className="px-8 py-6">
+          <div className="grid grid-cols-12 gap-6">
+            {/* left: search + table */}
+            <div className="col-span-12 lg:col-span-5">
+              <div className="mb-3 text-lg font-semibold text-neutral-900">후보지 검색</div>
+
+              <div className="relative">
+                <input
+                  value={q}
+                  onChange={(e) => setQ(e.target.value)}
+                  placeholder="주소검색"
+                  className="h-12 w-full rounded-sm border border-neutral-300 bg-white px-4 pr-12 text-sm outline-none focus:border-sky-500"
+                />
+                <button
+                  type="button"
+                  aria-label="검색"
+                  onClick={() => setQ((v) => v.trim())}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full text-[#01ACE5] hover:bg-slate-100"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    />
+                    <path
+                      d="M21 21l-4.3-4.3"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              {/* table header */}
+              <div className="mt-4 overflow-hidden rounded-sm border border-neutral-200">
+                <div className="grid grid-cols-12 bg-emerald-50/70 px-4 py-3 text-sm font-semibold text-neutral-800">
+                  <div className="col-span-6 flex items-center justify-center">시설명</div>
+                  <div className="col-span-2 text-center">
+                    하수처리량<br />(m³/일)
+                  </div>
+                  <div className="col-span-2 text-center">
+                    재이용량<br />(m³/일)
+                  </div>
+                  <div className="col-span-2 text-center">선택</div>
+                </div>
+
+                {/* rows */}
+                <div className="max-h-[420px] overflow-auto">
+                  {filtered.length === 0 ? (
+                    <div className="px-4 py-10 text-center text-sm text-neutral-500">
+                      검색 결과가 없습니다.
+                    </div>
+                  ) : (
+                    filtered.map((s, idx) => {
+                      const picked = isSelected(s.id);
+                      const disabled = !picked && selected.length >= maxSelect;
+                      return (
+                        <div
+                          key={s.id}
+                          className="grid grid-cols-12 items-center gap-2 border-t border-neutral-200 px-4 py-3 text-sm"
+                        >
+                          <div className="col-span-6 truncate">
+                            <span className="mr-2 text-neutral-500">{idx + 1}</span>
+                            {s.name}
+                          </div>
+                          <div className="col-span-2 text-center">{s.sewageM3d.toLocaleString()}</div>
+                          <div className="col-span-2 text-center">{s.reuseM3d.toLocaleString()}</div>
+                          <div className="col-span-2 flex justify-center">
+                            <button
+                              type="button"
+                              disabled={disabled}
+                              onClick={() => toggleSelect(s)}
+                              className={[
+                                "h-8 rounded-sm px-3 text-xs",
+                                picked ? "bg-gray-600 text-white" : "bg-sky-500 text-white hover:bg-sky-600",
+                                disabled ? "cursor-not-allowed opacity-40" : "",
+                              ].join(" ")}
+                            >
+                              {picked ? "해제" : "선택"}
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+
+              {/* <div className="mt-2 text-xs text-neutral-500">
+                최대 {maxSelect}개까지 선택 가능합니다.
+              </div> */}
+            </div>
+
+            {/* right: map */}
+            <div className="col-span-12 lg:col-span-7">
+              <div className="h-[520px] w-full overflow-hidden rounded-sm border border-neutral-200 bg-neutral-50 relative">
+                {/* TODO: 실제 지도 SDK 연동 시 이 영역 교체 */}
+                <div className="absolute inset-0 grid place-items-center text-sm text-neutral-500">
+                  지도 영역(추후 지도 SDK 연동)
+                </div>
+
+                {/* 선택된 항목의 "가짜 마커" */}
+                {selected.map((s, i) => {
+                    const POS = [
+                        { top: "40%", left: "45%" },
+                        { top: "25%", left: "75%" },
+                        { top: "70%", left: "80%" },
+                  ] as const;
+
+                  const pos = POS[i % POS.length] ?? POS[0];
+
+                  return (
+                        <div
+                        key={s.id}
+                        className="absolute"
+                        style={{ top: pos.top, left: pos.left }}
+                        >
+                        <MapMarker label={String(i + 1)} />
+                        </div>
+                    );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* selected chips */}
+          <div className="mt-6">
+            <div className="mb-2 text-lg font-semibold text-neutral-900">
+              선택된 시설 <span className="text-sm font-normal text-neutral-500">(시설명/하수처리량(m³/일)/재이용량(m³/일))</span>
+            </div>
+
+            <div className="min-h-[52px] rounded-sm border border-neutral-200 bg-white px-4 py-3">
+              {selected.length === 0 ? (
+                <div className="text-sm text-neutral-500">선택된 시설이 없습니다.</div>
+              ) : (
+                <div className="flex flex-wrap gap-3">
+                  {selected.map((s) => (
+                    <div
+                      key={s.id}
+                      className="inline-flex items-center gap-3 rounded-sm bg-[#EAF5F5] px-4 py-3 text-sm text-[#01ACE5]"
+                    >
+                      <span className="font-medium">
+                        {s.name} / {s.sewageM3d.toLocaleString()}(m³/일) / {s.reuseM3d.toLocaleString()}(m³/일)
+                      </span>
+                      <button
+                        type="button"
+                        aria-label="삭제"
+                        onClick={() => removeChip(s.id)}
+                        className="grid h-7 w-7 place-items-center rounded-sm hover:bg-sky-100 text-neutral-700 font-semibold"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* footer button */}
+          <div className="mt-6 flex justify-center pb-2">
+            <button
+              type="button"
+              onClick={() => onApply(selected)}
+              className="h-11 rounded-sm bg-[#0B4EA2] px-10 text-base text-white hover:opacity-90"
+            >
+              후보지 확인 및 적용
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/components/CaseImageSlider.tsx b/apps/dm_new/components/CaseImageSlider.tsx
index 6c50d5a5c..41d8987b8 100644
--- a/apps/dm_new/components/CaseImageSlider.tsx
+++ b/apps/dm_new/components/CaseImageSlider.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/components/CaseTabsCarousel.tsx b/apps/dm_new/components/CaseTabsCarousel.tsx
index 8d916817e..ece8f0848 100644
--- a/apps/dm_new/components/CaseTabsCarousel.tsx
+++ b/apps/dm_new/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/components/ImageSlider.tsx b/apps/dm_new/components/ImageSlider.tsx
index 6c50d5a5c..41d8987b8 100644
--- a/apps/dm_new/components/ImageSlider.tsx
+++ b/apps/dm_new/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/components/Lnb.tsx b/apps/dm_new/components/Lnb.tsx
index a9a41d4a4..b3861fbe0 100644
--- a/apps/dm_new/components/Lnb.tsx
+++ b/apps/dm_new/components/Lnb.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -68,11 +69,21 @@ export default function Lnb() {
   }, [pathname, secondLevelMenus]);
 
   return (
-    <aside className="w-[260px] min-w-[260px] shrink-0">
+    <aside
+        className={[
+        "fixed left-0 top-[83px]",                 // ✅ 화면 고정 + TopNav 아래로
+        "w-[260px] min-w-[260px] shrink-0",
+        "h-[calc(100vh-83px)]",                    // ✅ 남은 높이만큼
+        "overflow-y-auto",                         // ✅ LNB 내부 스크롤
+        "bg-white z-50",                           // ✅ 겹침 방지
+        ].join(" ")}
+    >
+      {/* 타이틀 */}
       <div className="flex h-[120px] items-center justify-center bg-gradient-to-r from-cyan-500 to-green-500 text-[40px] font-bold text-white">
         {currentTopMenu?.menuKornNm?.trim().split(/\s+/).pop() ?? ""}
       </div>
 
+      {/* 메뉴 */}  
       <ul>
         {secondLevelMenus.map((item) => {
           const hasChildren = hasAnyChild(item);
@@ -120,9 +131,11 @@ export default function Lnb() {
                     isOpen ? "rotate-180" : "rotate-0",
                   ].join(" ")}
                 >
-                  <img
+                  <Image
                     src="/images/landing/drop_arrow.svg"
                     alt="menu toggle icon"
+                    width={28}
+                    height={28}
                     className="h-7 w-7"
                   />
                 </span>
diff --git a/apps/dm_new/eslint.config.mjs b/apps/dm_new/eslint.config.mjs
index 9201e16dd..7de132089 100644
--- a/apps/dm_new/eslint.config.mjs
+++ b/apps/dm_new/eslint.config.mjs
@@ -24,7 +24,7 @@ const eslintConfig = [
   {rules:{
     // other rules..
     "@typescript-eslint/no-explicit-any": "off",
-    "@next/next/no-img-element": "off",
+    // "@next/next/no-img-element": "off",
     ...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
   }},
 ];
diff --git a/apps/dm_new/package.json b/apps/dm_new/package.json
index c2249293f..f318baf0b 100644
--- a/apps/dm_new/package.json
+++ b/apps/dm_new/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3015",
     "build": "next build",
-    "start:dm": "next start -p 3015",
+    "start:dm_new": "next start -p 3015",
     "lint": "next lint"
   },
   "dependencies": {
diff --git a/apps/sn/AGENTS.md b/apps/sn/AGENTS.md
new file mode 100644
index 000000000..18d6c1e38
--- /dev/null
+++ b/apps/sn/AGENTS.md
@@ -0,0 +1,35 @@
+## Project
+This repository contains a Next.js web application.
+
+Main technologies:
+- Next.js
+- TypeScript
+- pnpm workspace
+- turborepo
+
+이 저장소는 pnpm workspace + Turborepo 기반 monorepo이다.
+
+- 워크스페이스 범위는 `apps/*`, `apps/common/*`, `packages/*`, `packages/common/*`
+- 루트 스크립트는 `turbo run build`, `turbo run dev` 를 사용한다
+- `build` 작업은 의존 패키지의 `build` 를 먼저 수행한다 (`dependsOn: ["^build"]`)
+- `dev` 는 캐시하지 않는 지속 실행 작업이다
+- 변경 범위만 선택 실행할 수 있으므로, 전체 빌드보다 `--filter` 사용을 우선한다
+
+## Encoding 
+- UTF-8 
+- 한글이 깨지지 않도록 주의할 것
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+
diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts
index 2aa3d0ac5..4e501fb20 100644
--- a/apps/sn/app/(map-layout)/map/components/common/table.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/table.ts
@@ -493,8 +493,8 @@ export const MsSwageMhlCol = [
   { id: 'wdth_len', title: '가로길이(m)' },
   { id: 'vrtc_len', title: '세로길이(m)' },
   // { id: 'ang_dir', title: '표고' },
-  { id: 'altd_vl', title: '표고(EL.m)' },
-  { id: 'dpthl_vl', title: '심도(m)' },
+  { id: 'altd_vl', title: '지표고(EL.m)' },
+  { id: 'dpthl_vl', title: '맨홀저고(EL.m)' },
   // { id: 'inst_mng_no', title: '기관관리번호' }
 ];
 export const MsSwageMhlCol2 = [
@@ -518,8 +518,8 @@ export const MsSwageMhlCol2 = [
   { id: 'wdthLen', title: '가로길이(m)' },
   { id: 'vrtcLen', title: '세로길이(m)' },
   // { id: 'angDir', title: '표고' },
-  { id: 'altdVl', title: '표고(EL.m)' },
-  { id: 'dpthlVl', title: '심도(m)' },
+  { id: 'altdVl', title: '지표고(EL.m)' },
+  { id: 'dpthlVl', title: '맨홀저고(EL.m)' },
   // { id: 'instMngNo', title: '기관관리번호' }
 ];
 export const MsSwageMhlExcelCol = {
@@ -531,8 +531,8 @@ export const MsSwageMhlExcelCol = {
   'swageMhlDiamVl': '하수맨홀구경(mm)',
   'wdthLen': '가로길이(m)',
   'vrtcLen': '세로길이(m)',
-  'altdVl': '표고(EL.m)',
-  'dpthlVl': '심도(m)'
+  'altdVl': '지표고(EL.m)',
+  'dpthlVl': '맨홀저고(EL.m)'
 };
 // 하수맨홀 뚜껑재질 코드표
 export const MS_SWAGE_MHL_CODES = [
@@ -845,4 +845,4 @@ export const numberFields = [
   'mesureIntrvl', 'qltwtrCo', 'rnysnFvlc', 'clarFvlc',
   'bizAmt', 'count',
   'chmbr_xcnts', 'chmbr_ydnts'
-];
\ No newline at end of file
+];
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index 90ec5a120..73f8ae8c7 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -171,6 +171,9 @@ const Map = () => {
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
           checkInterval={2500}
+
+          defaultZoom={7.5}
+          defaultLonLat={[127.75, 36]}
         />
       </div>
     </>
diff --git a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
index 6a5c3f893..4ea769ff7 100644
--- a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
+++ b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
@@ -16,8 +16,8 @@ import { Label } from "@common/components/ui/label";
 import { useEffect } from "react";
 
 export const WATER_DEPTH_LAYER_TYPES: string[] = [
-  'tb_ms_flood_dngr_map',
-  'tb_ms_sbmrg_dngr_map'
+  'tb_ms_flood_dngr_map', // 홍수위험지도
+  'tb_ms_sbmrg_dngr_map'  // 침수위험지도
 ];
 
 interface WaterDepthProps {
diff --git a/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
index 79e195925..31500959b 100644
--- a/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
@@ -1,13 +1,16 @@
 "use client";
 import { SelectBox, type SelectDataType } from "../../../ui";
+import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import GisApp from "../lib/gis.core";
+import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
+// import { getGeometryCenter } from "./utils";
 
 const geoserverUrl =
   "/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json";
 
 const FACILITY_TYPE_URL_MAP: Record<string, string> = {
-  tb_il_swage_prcs_fclt: geoserverUrl, //하수처리시설
+  tb_il_swage_prcs_fclt: geoserverUrl,
 };
 
 interface SearchBarProps {
@@ -15,29 +18,40 @@ interface SearchBarProps {
   facilityTypes: { text: string; val: string }[];
 }
 
+interface CenterSelectDataType extends SelectDataType {
+  center?: [number, number]; // 좌표 중심 위치
+}
+
 export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
   const [sidoValue, setSidoValue] = useState("0");
   const [sigunValue, setSigunValue] = useState("0");
-  const [sidoData, setSidoData] = useState<SelectDataType[]>([{ text: "시도", val: "0" }]);
-  const [sigunData, setSigunData] = useState<SelectDataType[]>([{ text: "시군구", val: "0" }]);
-  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "시군구", val: "0" }]);
-  const [facilityData, setFacilityData] = useState<SelectDataType[]>([{ text: "하수처리시설", val: "0" }]);
+  const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
+    { text: "시도", val: "0" },
+  ]);
+  const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
+    { text: "시군구", val: "0" },
+  ]);
+  const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
+    { text: "시군구", val: "0" },
+  ]);
+  const [facilityData, setFacilityData] = useState<SelectDataType[]>([
+    { text: "하수처리시설", val: "0" },
+  ]);
   const [facilityValue, setFacilityValue] = useState("0");
 
   const [facilityType, setFacilityType] = useState(
-    facilityTypes?.length === 1 && facilityTypes[0]
-      ? facilityTypes[0].val
-      : "0",
+    facilityTypes?.length === 1 && facilityTypes[0] ? facilityTypes[0].val : "0",
   );
 
   const fetchSido = async () => {
     const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_ctpv&outputFormat=application/json&propertyName=mctpv_korn_nm,mctpv_cd`;
-    const res = await fetch(url).then(res => res.json());
+    const res = await fetch(url).then((r) => r.json());
 
-    const list = res.features
+    const list = (res.features || [])
       .map((f: any) => ({
         text: f.properties.mctpv_korn_nm,
         val: f.properties.mctpv_cd,
+        center: sidoCenter[f.properties.mctpv_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
       }))
       .sort((a: any, b: any) => {
         // 커스텀 순서 정의
@@ -81,18 +95,20 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
 
   const fetchSigungu = async () => {
     const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_sgg&outputFormat=application/json&propertyName=sgg_cd,sgg_korn_nm`;
-    const res = await fetch(url).then(res => res.json());
+    //const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_sgg&srsName=${GisApp.TO_PROJ}&outputFormat=application/json&propertyName=sgg_cd,sgg_korn_nm,geom`;
+    const res = await fetch(url).then((r) => r.json());
 
-    const list = res.features
+    const list = (res.features || [])
       .map((f: any) => ({
         text: f.properties.sgg_korn_nm,
         val: f.properties.sgg_cd,
+        center: sigunguCenter[f.properties.sgg_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
       }))
-      .sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
+      .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
+
     setSigunData(list);
   };
 
-  //시설명 콤보박스 조회
   const fetchFacilitiesBySggNm = async (
     sggCd: string,
     sggNm: string,
@@ -114,23 +130,18 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
 
     let list: SelectDataType[] = [];
 
-    if (
-      type === "tb_il_swage_prcs_fclt" //하수처리시설
-    ) {
+    if (type === "tb_il_swage_prcs_fclt") {
       const cqlFilter = `ctpv_nm='${encodeURIComponent(sidoNm)}' AND sgg_nm='${encodeURIComponent(sggNm)}'`;
       url = `${url}&typeName=hasudo:${type}&cql_filter=${cqlFilter}`;
       const res = await fetch(url);
       const json = await res.json();
-      list = json.features
+      list = (json.features || [])
         .map((f: any) => ({
           text: f.properties.swtrmt_fclt_nm ?? "(이름없음)",
           val: f.id,
         }))
-        .sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
-    } else if (
-      type === "tb_wr_bdst_ruse_fclt" // 재이용시설
-    ) {
-      //재용에서 참조하는 하수처리시설 목록
+        .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
+    } else if (type === "tb_wr_bdst_ruse_fclt") {
       const paramsRes = await fetch("/reuse-service/reuseFc/pubFc");
       const paramsJson = await paramsRes.json();
       const params = paramsJson.data;
@@ -148,19 +159,14 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
         text: item.ruseUtztnFcltNm ?? "(이름없음)",
         val: item.pbnstRuseFcltId,
       }));
-    } else if (
-      type === "tb_wr_ruse_fclt_dmd_co" //수요처
-    ) {
+    } else if (type === "tb_wr_ruse_fclt_dmd_co") {
       const res = await fetch(url);
       const json = await res.json();
       list = (json.data || []).map((item: any) => ({
         text: item.dmdCoNm ?? "(이름없음)",
         val: item.dmdInfoId,
       }));
-    } else if (
-      type === "tb_wr_tmpr_dmd_co" //잠재수요처
-    ) {
-      // GET 방식
+    } else if (type === "tb_wr_tmpr_dmd_co") {
       const res = await fetch(url);
       const json = await res.json();
       list = (json.data || []).map((item: any) => ({
@@ -168,7 +174,6 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
         val: item.fctryMngSn,
       }));
     } else {
-      // GET 방식
       const res = await fetch(url);
       const json = await res.json();
       list = (json.data || []).map((item: any) => ({
@@ -177,27 +182,25 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
       }));
     }
 
-    // 가나다순 정렬 후 set
-    const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, 'ko'));
-    setFacilityData([{ text: "시도", val: "0" }, ...sorted]);
+    const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, "ko"));
+    setFacilityData([{ text: "하수처리시설", val: "0" }, ...sorted]);
     setFacilityValue("0");
   };
 
-  //시도, 시군구 초기 데이터 조회
   useEffect(() => {
     fetchSido();
     fetchSigungu();
   }, []);
 
-  //시군구 데이터 초기화
   const initializeSigunData = useCallback(
-    (sidoCd: string) => {
-      if (sidoCd === "0") {
+    (nextSidoCd: string) => {
+      if (nextSidoCd === "0") {
         setFilteredSigunData([{ text: "시군구", val: "0" }]);
         setSigunValue("0");
         return;
       }
-      const prefix = sidoCd.substring(0, 2);
+
+      const prefix = nextSidoCd.substring(0, 2);
       const filtered = sigunData.filter((item) => item.val.startsWith(prefix));
       setFilteredSigunData([{ text: "시군구", val: "0" }, ...filtered]);
       setSigunValue("0");
@@ -205,7 +208,6 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
     [sigunData],
   );
 
-  //콤보박스 선택시 연관 콤보박스 처리
   const onSelectValue = useCallback(
     (val: string, type: string) => {
       if (type === "ctpvCd") {
@@ -213,54 +215,78 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
         initializeSigunData(val);
         setFacilityData([{ text: "하수처리시설", val: "0" }]);
         setFacilityValue("0");
-      } else if (type === "sggCd") {
+        return;
+      }
+
+      if (type === "sggCd") {
         setSigunValue(val);
-        const sidoNm =
-          sidoData.find((item) => item.val === sidoValue)?.text || "";
+        const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
         const sggNm = sigunData.find((item) => item.val === val)?.text || "";
         const sggCd = sigunData.find((item) => item.val === val)?.val || "";
-        if (sggNm && sidoNm)
-          fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
-      } else if (type === "facilityType") {
+        if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
+        return;
+      }
+
+      if (type === "facilityType") {
         setFacilityType(val);
         setFacilityValue("0");
         setFacilityData([{ text: "하수처리시설", val: "0" }]);
-        const sidoNm =
-          sidoData.find((item) => item.val === sidoValue)?.text || "";
-        const sggNm =
-          sigunData.find((item) => item.val === sigunValue)?.text || "";
-        const sggCd =
-          sigunData.find((item) => item.val === sigunValue)?.val || "";
+        const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
+        const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
+        const sggCd = sigunData.find((item) => item.val === sigunValue)?.val || "";
         if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, val);
-      } else if (type === "fcltCd") {
-        setFacilityValue(val);
+        return;
+      }
 
-        // 하수처리시설일 때 바로 handleFeatureFocus 호출
+      if (type === "fcltCd") {
+        setFacilityValue(val);
         if (val !== "0") {
           handleFeatureFocus({
             fid: val,
-            layerNm: "tb_il_swage_prcs_fclt", // 레이어 이름
+            layerNm: "tb_il_swage_prcs_fclt",
           });
         }
       }
     },
-    [initializeSigunData, sigunData, sigunValue, sidoData, sidoValue],
+    [initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
   );
 
+  const handleSearch = useCallback(() => {
+    if (sidoValue === "0") {
+      alert("시도를 선택해 주세요");
+      return;
+    }
+
+    const selectedSido = sidoData.find((item) => item.val === sidoValue);
+    if (!selectedSido?.center) return;
+
+    if (sigunValue !== "0") {
+      const selectedSigun =
+        filteredSigunData.find((item) => item.val === sigunValue) ??
+        sigunData.find((item) => item.val === sigunValue);
+
+      if (selectedSigun?.center) {
+        moveMapToCenter(gisMaps, selectedSigun.center, 12);
+        return;
+      }
+    }
+
+    moveMapToCenter(gisMaps, selectedSido.center, 11);
+  }, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData]);
+
   const handleFeatureFocus = (data: any) => {
     const map = gisMaps.current;
     if (!map) {
       console.warn("지도가 초기화되지 않았습니다.");
       return;
     }
-    // 항상 같은 select 객체 사용
+
     const select = GisApp.Module.select as any;
     if (!select) return;
-    // 1. 기존 선택 초기화
-    //select.resetSelectedFeature();
-    // 2. data가 OpenLayers Feature 인스턴스인지 확인
+
     let foundFeature: any = null;
-    let featureId = data.fid;
+    const featureId = data.fid;
+
     map
       .getLayers()
       .getArray()
@@ -271,7 +297,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
           if (feature) foundFeature = feature;
         }
       });
-    // 3. 피처 선택
+
     if (foundFeature) {
       const geometry = foundFeature.getGeometry();
       if (geometry) {
@@ -284,7 +310,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
           nearest: true,
         });
       } else {
-        alert("위치정보를 찾을 수 없습니다.")
+        alert("위치정보를 찾을 수 없습니다.");
         console.warn("geometry를 찾을 수 없습니다:", data);
       }
     } else {
@@ -303,9 +329,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
               selectClass="rounded-lg bg-white"
               label=""
               selectArray={sidoData}
-              onSelectValue={(val: any) =>
-                onSelectValue(val.toString(), "ctpvCd")
-              }
+              onSelectValue={(val: any) => onSelectValue(val.toString(), "ctpvCd")}
               value={sidoValue}
             />
             <SelectBox
@@ -314,9 +338,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
               selectClass="rounded-lg bg-white"
               label=""
               selectArray={filteredSigunData}
-              onSelectValue={(val: any) =>
-                onSelectValue(val.toString(), "sggCd")
-              }
+              onSelectValue={(val: any) => onSelectValue(val.toString(), "sggCd")}
               value={sigunValue}
             />
             <SelectBox
@@ -325,11 +347,14 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
               selectClass="rounded-lg bg-white"
               label=""
               selectArray={facilityData}
-              onSelectValue={(val: any) =>
-                onSelectValue(val.toString(), "fcltCd")
-              }
+              onSelectValue={(val: any) => onSelectValue(val.toString(), "fcltCd")}
               value={facilityValue}
             />
+            <div className="flex flex-row space-x-2">
+              <Button color="primary" className="mx-2 mt-1" size="sm" onClick={handleSearch}>
+                조회
+              </Button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
index 40f28e867..a663feabf 100644
--- a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
@@ -4,6 +4,7 @@ import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import SearchInputText from "./SearchInputText";
 import GisApp from "../lib/gis.core";
+import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
 
 const FACILITY_TYPE_URL_MAP: Record<string, string> = {
   tb_il_swage_prcs_fclt:
@@ -29,6 +30,10 @@ interface SearchBarProps {
   onInit?: any;
 }
 
+interface CenterSelectDataType extends SelectDataType {
+  center?: [number, number];
+}
+
 export const SearchBar = ({
   gisMaps,
   facilityTypes,
@@ -45,13 +50,13 @@ export const SearchBar = ({
     []
   );
 
-  const [sidoData, setSidoData] = useState<SelectDataType[]>([
+  const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
     { text: "시도", val: "0" },
   ]);
-  const [sigunData, setSigunData] = useState<SelectDataType[]>([
+  const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
     { text: "시군구", val: "0" },
   ]);
-  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([
+  const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
     { text: "시군구", val: "0" },
   ]);
 
@@ -60,7 +65,11 @@ export const SearchBar = ({
     const json = await res.json();
     const sidoList = json
       .filter((item: any) => item.lwpoCd?.length === 2)
-      .map((item: any) => ({ val: item.lwpoCd, text: item.lwpoCdNm }))
+      .map((item: any) => ({
+        val: item.lwpoCd,
+        text: item.lwpoCdNm,
+        center: sidoCenter[item.lwpoCd?.trim()],
+      }))
       .sort((a: any, b: any) => {
         // 커스텀 순서 정의
         const customOrder = [
@@ -100,7 +109,11 @@ export const SearchBar = ({
       });
     const sigunList = json
       .filter((item: any) => item.lwpoCd?.length > 2)
-      .map((item: any) => ({ val: item.lwpoCd, text: item.lwpoCdNm }))
+      .map((item: any) => ({
+        val: item.lwpoCd,
+        text: item.lwpoCdNm,
+        center: sigunguCenter[item.lwpoCd?.trim()],
+      }))
       .sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
     setSidoData([{ text: "시도", val: "0" }, ...sidoList]);
     setSigunData(sigunList);
@@ -146,7 +159,29 @@ export const SearchBar = ({
   );
 
   const handleSearch = async () => {
-    if (!fcltyNm) return alert("시설명을 입력하세요.");
+    if (!fcltyNm) {
+      if (sidoValue === "0") {
+        alert("시도를 선택해 주세요");
+        return;
+      }
+
+      const selectedSido = sidoData.find((item) => item.val === sidoValue);
+      if (!selectedSido?.center) return;
+
+      if (sigunValue !== "0") {
+        const selectedSigun =
+          filteredSigunData.find((item) => item.val === sigunValue) ??
+          sigunData.find((item) => item.val === sigunValue);
+
+        if (selectedSigun?.center) {
+          moveMapToCenter(gisMaps, selectedSigun.center, 12);
+          return;
+        }
+      }
+
+      moveMapToCenter(gisMaps, selectedSido.center, 11);
+      return;
+    }
 
     const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
     const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
diff --git a/packages/common/business_components/src/ui/map/searchBar/utils.ts b/packages/common/business_components/src/ui/map/searchBar/utils.ts
new file mode 100644
index 000000000..57528d6b9
--- /dev/null
+++ b/packages/common/business_components/src/ui/map/searchBar/utils.ts
@@ -0,0 +1,367 @@
+import type { RefObject } from "react";
+import { transform } from "ol/proj";
+import GisApp from "../lib/gis.core";
+
+export const getGeometryCenter = (geometry: any): [number, number] | null => {
+  if (!geometry?.coordinates) return null;
+
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+
+  const visit = (coords: any) => {
+    if (!Array.isArray(coords)) return;
+    if (
+      coords.length >= 2 &&
+      typeof coords[0] === "number" &&
+      typeof coords[1] === "number"
+    ) {
+      const x = coords[0];
+      const y = coords[1];
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+      return;
+    }
+    coords.forEach(visit);
+  };
+
+  visit(geometry.coordinates);
+
+  if (
+    !Number.isFinite(minX) ||
+    !Number.isFinite(minY) ||
+    !Number.isFinite(maxX) ||
+    !Number.isFinite(maxY)
+  ) {
+    return null;
+  }
+
+  return [(minX + maxX) / 2, (minY + maxY) / 2];
+};
+
+export const getMapCenterCoordinate = (centerCoord: [number, number]): [number, number] => {
+  const [x, y] = centerCoord;
+  const looksLikeLonLat = Math.abs(x) <= 180 && Math.abs(y) <= 90;
+  const looksLikeLatLonSwapped = Math.abs(x) <= 90 && Math.abs(y) <= 180;
+
+  if (looksLikeLonLat) {
+    return transform(centerCoord, GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
+  }
+
+  if (looksLikeLatLonSwapped) {
+    return transform([y, x], GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
+  }
+
+  return centerCoord;
+};
+
+export const moveMapToCenter = (
+  gisMaps: RefObject<any>,
+  centerCoord?: [number, number],
+  zoom?: number,
+) => {
+  if (!centerCoord) return;
+
+  const map = gisMaps.current;
+  if (!map?.getView) return;
+
+  const view = map.getView();
+  const center = getMapCenterCoordinate(centerCoord);
+  if (!Number.isFinite(center[0]) || !Number.isFinite(center[1])) return;
+
+  const projection = view.getProjection?.();
+  const extent = projection?.getExtent?.();
+  if (extent) {
+    const [minX, minY, maxX, maxY] = extent;
+    if (center[0] < minX || center[0] > maxX || center[1] < minY || center[1] > maxY) {
+      console.warn("중심좌표가 지도 범위를 벗어나 이동을 중단합니다.", { center });
+      return;
+    }
+  }
+
+  view.animate({
+    center,
+    ...(typeof zoom === "number" ? { zoom } : {}),
+    duration: 500,
+  });
+};
+
+
+export const sidoCenter: Record<string, [number, number]> = {
+  "11": [953551.4119216551, 1951826.357686395], // 서울특별시
+  "26": [1139616.39795744, 1683535.70569214], // 부산광역시
+  "27": [1101486.7843035748, 1774852.3345170799], // 대구광역시
+  "28": [923114.560964345, 1943066.5795316151], // 인천광역시
+  "29": [939294.465052485, 1684630.0528689548], // 광주광역시
+  "30": [991301.069516585, 1816039.953510165], // 대전광역시
+  "31": [1155621.6870651902, 1727062.69578941], // 울산광역시
+  "36": [979381.304388835, 1841430.83666584], // 세종특별자치시
+  "41": [965621.8990488851, 1954345.5683645], // 경기도
+  "51": [1065114.938094025, 1980661.8453088552], // 강원특별자치도
+  "43": [1041183.7558293699, 1848671.9260201901], // 충청북도
+  "44": [918689.7963483699, 1836216.9375309348], // 충청남도
+  "52": [949568.330647045, 1748060.215177075], // 전북특별자치도
+  "46": [906934.38266853, 1637218.959990745], // 전라남도
+  "47": [1207219.543276005, 1843195.136606685], // 경상북도
+  "48": [1081504.77257488, 1690185.644486565], // 경상남도
+  "50": [912295.3285630699, 1508716.724020285], // 제주특별자치도
+};
+
+export const sigunguCenter: Record<string, [number, number]> = {
+  "41820": [994886.197272545, 1979052.53325589], // 가평군
+  "11680": [961673.31210415, 1944170.63969123], // 강남구
+  "11740": [968769.7482373801, 1950018.61637764], // 강동구
+  "51150": [1117008.10469879, 1968660.393087245], // 강릉시
+  "11305": [957184.89551525, 1960948.17897649], // 강북구
+  "11500": [940169.1006571399, 1952038.261591505], // 강서구
+  "26440": [1125722.34144724, 1680630.4026719849], // 강서구
+  "46810": [933212.18802734, 1624923.4715329101], // 강진군
+  "28710": [889789.267999845, 1967857.594168955], // 강화군
+  "48310": [1102135.950034755, 1651860.5015630699], // 거제시
+  "48880": [1035035.401801025, 1746287.958522825], // 거창군
+  "47290": [1119807.604852405, 1761907.1228125598], // 경산시
+  "47130": [1157713.8626030548, 1763907.92371664], // 경주시
+  "44250": [977015.65488622, 1810444.360246635], // 계룡시
+  "28245": [932663.7165225251, 1951314.751646345], // 계양구
+  "47830": [1074241.6005863552, 1748726.26930297], // 고령군
+  "48820": [1073144.623548525, 1668111.92215727], // 고성군
+  "51820": [1079906.976889925, 2044841.96337935], // 고성군
+  "41281": [945034.57886003, 1962467.607140625], // 고양시 덕양구
+  "41285": [937759.4023643399, 1964877.5403761598], // 고양시 일산동구
+  "41287": [931767.42700348, 1964473.38259711], // 고양시 일산서구
+  "52790": [918393.62804468, 1716132.826828825], // 고창군
+  "46770": [982955.40283695, 1619845.06015117], // 고흥군
+  "46720": [976956.4637679299, 1689787.68075054], // 곡성군
+  "44150": [962642.898486655, 1831283.240475945], // 공주시
+  "41290": [956128.575373195, 1937342.1591869402], // 과천시
+  "11620": [950816.2708264501, 1940837.18159646], // 관악구
+  "41210": [943658.93750771, 1938982.666803485], // 광명시
+  "29200": [931929.616476265, 1685710.56302553], // 광산구
+  "46230": [1014247.5910250349, 1670923.40464431], // 광양시
+  "41610": [981367.9647162401, 1933496.23707509], // 광주시
+  "11215": [963403.339472115, 1949946.5079550901], // 광진구
+  "43760": [1030949.630659295, 1864086.615596175], // 괴산군
+  "46730": [999616.7466281, 1692737.2456203648], // 구례군
+  "11530": [943255.85156361, 1944224.7496726601], // 구로구
+  "41310": [967836.346287095, 1955821.725581055], // 구리시
+  "47190": [1076297.5737083051, 1801900.2253747801], // 구미시
+  "52130": [904674.42544751, 1767715.183037305], // 군산시
+  "27720": [1103849.611897755, 1797204.1944948], // 군위군
+  "41410": [948411.5776788951, 1927135.757437655], // 군포시
+  "44710": [998110.87580872, 1792026.97835628], // 금산군
+  "26410": [1144696.85330015, 1697028.92074261], // 금정구
+  "11545": [946955.492372005, 1940271.753176735], // 금천구
+  "26710": [1155182.296211175, 1700204.308554315], // 기장군
+  "52210": [935224.890489175, 1755205.56953502], // 김제시
+  "47150": [1052988.6733146599, 1783129.650228145], // 김천시
+  "41570": [925936.0119416551, 1965389.1203246699], // 김포시
+  "48250": [1123054.361467805, 1698359.11561172], // 김해시
+  "46170": [927543.498211845, 1666547.3264012402], // 나주시
+  "26290": [1145395.56557786, 1682401.034936155], // 남구
+  "27200": [1097723.545359045, 1760233.9235273101], // 남구
+  "29155": [939966.74427248, 1678697.8498475049], // 남구
+  "31140": [1164388.02782853, 1725008.616189565], // 남구
+  "28200": [931330.60305263, 1937119.742216935], // 남동구
+  "41360": [976250.43203106, 1960416.01281481], // 남양주시
+  "52190": [993534.846345315, 1715101.9621615452], // 남원시
+  "48840": [1042145.28987352, 1636788.3540021451], // 남해군
+  "11350": [962686.53614943, 1961831.238915105], // 노원구
+  "44230": [969310.08745166, 1800569.86826501], // 논산시
+  "43800": [1083099.584261365, 1887213.24789353], // 단양군
+  "27290": [1092874.923985485, 1758802.075636735], // 달서구
+  "27710": [1092556.27778919, 1753550.63671916], // 달성군
+  "46710": [953252.8048743049, 1699620.87304459], // 담양군
+  "44270": [922626.193186825, 1879100.4990195702], // 당진시
+  "30230": [995239.980794815, 1823508.474804295], // 대덕구
+  "11320": [958705.07469343, 1963040.273132075], // 도봉구
+  "26170": [1140792.941703185, 1682445.908553165], // 동구
+  "27140": [1106713.2635032, 1771459.692642915], // 동구
+  "28140": [923114.560964345, 1943066.5795316151], // 동구
+  "29110": [950418.0804989601, 1680571.52359467], // 동구
+  "30110": [998801.519490555, 1813337.0627496801], // 동구
+  "31170": [1174320.64841428, 1726780.57547608], // 동구
+  "11230": [960324.5009049701, 1953909.102229775], // 동대문구
+  "41250": [963148.54470934, 1991284.1699954001], // 동두천시
+  "26260": [1143854.4548997101, 1691107.4825817398], // 동래구
+  "11590": [950875.3949149849, 1944274.8505625948], // 동작구
+  "51170": [1137915.778823135, 1947378.462972425], // 동해시
+  "11440": [947783.55349907, 1951598.7669664049], // 마포구
+  "46110": [897040.76889998, 1645038.46904772], // 목포시
+  "46840": [899587.661355305, 1664175.9893810651], // 무안군
+  "52730": [1019648.0651991949, 1770211.22681309], // 무주군
+  "47280": [1055620.11152262, 1855147.380883595], // 문경시
+  "28177": [926226.3594373399, 1940093.5607894901], // 미추홀구
+  "48270": [1117632.749546145, 1722736.830743895], // 밀양시
+  "44180": [896412.984839845, 1817364.412693855], // 보령시
+  "46780": [974939.082074685, 1646364.3864357], // 보성군
+  "43720": [1018843.696119875, 1832681.50774474], // 보은군
+  "47920": [1125627.975921425, 1881676.019098885], // 봉화군
+  "26230": [1140857.032737495, 1686905.10585393], // 부산진구
+  "52800": [906904.98605649, 1743711.597374285], // 부안군
+  "44760": [943835.889385045, 1803731.764881715], // 부여군
+  "41194": [937043.513148805, 1941917.36078241], // 부천시 소사구
+  "41196": [937651.62357278, 1948088.650724335], // 부천시 오정구
+  "41192": [936542.71080553, 1945011.678412175], // 부천시 원미구
+  "28237": [931536.9013984001, 1944153.806361985], // 부평구
+  "26320": [1138778.50401134, 1694043.434930405], // 북구
+  "27230": [1096421.976926225, 1771028.86509079], // 북구
+  "29170": [947985.671802775, 1688420.968474115], // 북구
+  "31200": [1170007.9393788301, 1735147.271494125], // 북구
+  "26530": [1135648.05832921, 1685887.73780504], // 사상구
+  "48240": [1048464.90586407, 1669923.18795966], // 사천시
+  "26380": [1134089.12930976, 1669378.70600097], // 사하구
+  "48860": [1036496.214687915, 1711373.1111203502], // 산청군
+  "51230": [1142435.56217199, 1918978.17539709], // 삼척시
+  "47250": [1050861.110185015, 1827830.141259105], // 상주시
+  "26140": [1137931.5983933099, 1678744.3981297952], // 서구
+  "27170": [1094695.438967345, 1764784.74637237], // 서구
+  "28260": [922809.601799805, 1950975.3525035651], // 서구
+  "29140": [941246.057711575, 1682370.2693891348], // 서구
+  "30170": [985795.240808525, 1808929.24401602], // 서구
+  "50130": [912245.46105533, 1478972.2801259952], // 서귀포시
+  "11410": [950162.9458121, 1953864.48715979], // 서대문구
+  "44210": [909519.454637895, 1868915.7895147852], // 서산시
+  "44770": [925279.862903135, 1788678.070235445], // 서천군
+  "11650": [959137.357577965, 1942072.4465401699], // 서초구
+  "41135": [964805.8995280201, 1930763.3113245051], // 성남시 분당구
+  "41131": [965443.992413075, 1937401.663424345], // 성남시 수정구
+  "41133": [969601.35785571, 1937919.08950087], // 성남시 중원구
+  "11200": [959451.922221585, 1950244.43970465], // 성동구
+  "11290": [957924.54027983, 1956512.99273417], // 성북구
+  "47840": [1065227.20912238, 1769071.96163128], // 성주군
+  "36110": [979381.304388835, 1841430.83666584], // 세종특별자치시
+  "51210": [1089137.1194603802, 2019900.279034885], // 속초시
+  "11710": [965928.83189988, 1945132.495701395], // 송파구
+  "27260": [1104712.551021275, 1760363.086093105], // 수성구
+  "26500": [1146933.8448469099, 1686288.07716536], // 수영구
+  "41113": [954297.6961326799, 1918466.4324002499], // 수원시 권선구
+  "41117": [961096.623048695, 1919787.236461525], // 수원시 영통구
+  "41111": [955699.294199125, 1924459.3724800851], // 수원시 장안구
+  "41115": [956709.41575029, 1919672.72074137], // 수원시 팔달구
+  "52770": [962532.77503817, 1714757.02288094], // 순창군
+  "46150": [989441.17839757, 1668074.09581569], // 순천시
+  "41390": [934025.6249972349, 1932609.450570995], // 시흥시
+  "46910": [837068.838454425, 1628081.7615658198], // 신안군
+  "44200": [953095.1457245699, 1866467.6723041101], // 아산시
+  "47170": [1108716.740335165, 1841036.9856003649], // 안동시
+  "41273": [921146.8917017151, 1914174.551465955], // 안산시 단원구
+  "41271": [944787.9139680951, 1925074.1128969], // 안산시 상록구
+  "41550": [983047.68986298, 1891835.77152603], // 안성시
+  "41173": [951774.092625505, 1933701.863194715], // 안양시 동안구
+  "41171": [947757.35105343, 1934091.7197804102], // 안양시 만안구
+  "51800": [1044799.8868826301, 2018930.475621245], // 양구군
+  "48330": [1140452.0009971252, 1713003.89300298], // 양산시
+  "51830": [1097181.1822994999, 2001875.93591869], // 양양군
+  "41630": [957059.65493005, 1978556.8707086649], // 양주시
+  "11470": [943115.85871501, 1947726.50098438], // 양천구
+  "41830": [1006799.81121338, 1946640.3454016], // 양평군
+  "46130": [1005710.6789662449, 1606473.622557845], // 여수시
+  "41670": [1007389.488139985, 1920986.5590416798], // 여주시
+  "28185": [924301.1973107599, 1932716.5874987599], // 연수구
+  "26470": [1143967.4104618952, 1688206.29479672], // 연제구
+  "41800": [955142.1788103101, 2011772.731874695], // 연천군
+  "46870": [892341.432019105, 1700705.951765325], // 영광군
+  "47770": [1161246.6696252748, 1831801.285765445], // 영덕군
+  "26200": [1142949.35128876, 1676148.93128651], // 영도구
+  "43740": [1029111.7777370601, 1796414.720970885], // 영동군
+  "11560": [948221.9355719599, 1946989.433783595], // 영등포구
+  "46830": [918568.42419672, 1645644.03685685], // 영암군
+  "47760": [1147157.8720550952, 1855483.55416634], // 영양군
+  "51750": [1089601.7085692, 1913792.65877573], // 영월군
+  "47210": [1096747.798418135, 1876468.75553605], // 영주시
+  "47230": [1128168.955619915, 1779896.3669964802], // 영천시
+  "44810": [935536.49511435, 1852175.0178411552], // 예산군
+  "47900": [1083616.75364318, 1850758.419176175], // 예천군
+  "41370": [959957.253397675, 1907245.6871241601], // 오산시
+  "43730": [1016925.1630849349, 1812306.15335931], // 옥천군
+  "28720": [831017.06725137, 1941763.7671776651], // 옹진군
+  "46890": [934681.072970785, 1580260.96434381], // 완도군
+  "52710": [971714.974980355, 1764297.860421155], // 완주군
+  "11170": [954152.265892775, 1948105.11473188], // 용산구
+  "41463": [966362.167328945, 1919086.059435395], // 용인시 기흥구
+  "41465": [962751.309054115, 1926067.760215145], // 용인시 수지구
+  "41461": [979413.39966679, 1913728.657159615], // 용인시 처인구
+  "47940": [1339459.86503077, 1939972.251018405], // 울릉군
+  "31710": [1152103.383022245, 1727062.6953479801], // 울주군
+  "47930": [1158508.6557213152, 1879083.142978875], // 울진군
+  "51130": [1042675.604280725, 1925192.470561375], // 원주시
+  "30200": [985050.9636310451, 1820539.200680445], // 유성구
+  "11380": [949045.72456328, 1957730.2124330248], // 은평구
+  "43770": [1010863.03644352, 1888460.954926385], // 음성군
+  "48720": [1069027.787455435, 1710230.081700215], // 의령군
+  "47730": [1098114.724920975, 1818807.01762542], // 의성군
+  "41430": [954677.940289845, 1928890.756176705], // 의왕시
+  "41150": [962517.29720437, 1970466.861837395], // 의정부시
+  "41500": [998578.52141335, 1911408.9081171248], // 이천시
+  "52140": [954517.27659099, 1780482.64843965], // 익산시
+  "51810": [1065461.7186508449, 2010839.9914423148], // 인제군
+  "52750": [978229.1338949, 1735882.14962747], // 임실군
+  "46880": [932255.0392670301, 1705063.362106785], // 장성군
+  "52740": [1002766.6532682499, 1739693.270420835], // 장수군
+  "46800": [946864.73876017, 1628580.0165673052], // 장흥군
+  "52113": [965336.86328101, 1761811.9640769851], // 전주시 덕진구
+  "52111": [966893.605588815, 1754468.0213283598], // 전주시 완산구
+  "51770": [1110360.32014753, 1931013.538670365], // 정선군
+  "52180": [947098.239651715, 1735070.37728938], // 정읍시
+  "50110": [912295.3285630699, 1517557.88079664], // 제주시
+  "43150": [1055671.53255738, 1893115.04197246], // 제천시
+  "11110": [954639.31671291, 1955652.65017071], // 종로구
+  "11140": [955326.326625775, 1951065.0090038702], // 중구
+  "26110": [1139836.3880665852, 1680068.477323895], // 중구
+  "27110": [1098795.054998835, 1763956.48671014], // 중구
+  "28110": [911564.657720635, 1939430.9255974651], // 중구
+  "30140": [992213.91688503, 1809014.1589880502], // 중구
+  "31110": [1163388.19285627, 1732177.831362065], // 중구
+  "11260": [964157.58830932, 1955182.665424475], // 중랑구
+  "43745": [1009013.34585424, 1864734.46162539], // 증평군
+  "46900": [870540.7578711801, 1597916.46618356], // 진도군
+  "52720": [995028.62264954, 1758625.23076353], // 진안군
+  "48170": [1057167.869451315, 1689727.04548209], // 진주시
+  "43750": [994342.7517215649, 1875793.7535851048], // 진천군
+  "48740": [1090841.266427235, 1726085.44764784], // 창녕군
+  "48125": [1090604.085880495, 1682986.7331746249], // 창원시 마산합포구
+  "48127": [1095576.787610035, 1692901.162402945], // 창원시 마산회원구
+  "48123": [1106540.710278115, 1689830.08565991], // 창원시 성산구
+  "48121": [1105558.14181398, 1701648.763579805], // 창원시 의창구
+  "48129": [1111617.62626141, 1680996.6599733299], // 창원시 진해구
+  "44131": [974478.67761805, 1862026.08139811], // 천안시 동남구
+  "44133": [971707.02854063, 1875704.530427825], // 천안시 서북구
+  "51780": [997447.306165415, 2024301.05104793], // 철원군
+  "47820": [1116479.97088183, 1746481.442573125], // 청도군
+  "47750": [1139213.58132652, 1821067.804006115], // 청송군
+  "44790": [941752.03871163, 1827462.3607307798], // 청양군
+  "43111": [1009613.9680185751, 1841264.469202615], // 청주시 상당구
+  "43112": [994258.23710022, 1838908.2251619152], // 청주시 서원구
+  "43114": [997183.756680205, 1857171.4242312452], // 청주시 청원구
+  "43113": [989161.30366111, 1849501.26145491], // 청주시 흥덕구
+  "51110": [1023515.451806125, 1986727.7291947599], // 춘천시
+  "43130": [1034982.8699803599, 1889790.67989893], // 충주시
+  "47850": [1086736.697665845, 1779277.075473485], // 칠곡군
+  "51190": [1131634.14282853, 1912631.8063723398], // 태백시
+  "44825": [864678.84145598, 1854929.12571281], // 태안군
+  "48220": [1085316.421521755, 1640596.827168765], // 통영시
+  "41480": [941812.744809255, 1983528.9263305948], // 파주시
+  "51760": [1088652.567431635, 1949959.4658569149], // 평창군
+  "41220": [952557.5035727851, 1891740.1058186102], // 평택시
+  "41650": [979667.7288193901, 1996457.8400075398], // 포천시
+  "47111": [1173941.15980316, 1776164.6804896551], // 포항시 남구
+  "47113": [1155413.511896325, 1798939.39325854], // 포항시 북구
+  "41450": [974619.56368595, 1947933.69704679], // 하남시
+  "48850": [1023458.661997725, 1681485.3751938199], // 하동군
+  "48730": [1084848.02553882, 1699020.07367632], // 함안군
+  "48870": [1020953.178491215, 1727526.228066345], // 함양군
+  "46860": [910867.931249965, 1679203.045458965], // 함평군
+  "48890": [1060435.92013279, 1733941.90683859], // 합천군
+  "46820": [907157.24936254, 1615346.232287635], // 해남군
+  "26350": [1151062.0301465848, 1690808.34175552], // 해운대구
+  "44800": [919404.43702764, 1841255.1935457601], // 홍성군
+  "51720": [1049442.09422194, 1972233.65191397], // 홍천군
+  "41590": [941810.22622111, 1906896.59289364], // 화성시
+  "46790": [955520.512544285, 1669429.020528105], // 화순군
+  "51790": [1015098.9945956401, 2015706.532260655], // 화천군
+  "51730": [1046904.40402372, 1943541.6685614302], // 횡성군
+};
+