Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/as/dev

.gitignore

@@ -4,10 +4,7 @@
 
 # dependencies
 node_modules/
-
-# build
-.next/
-dist/
+.idea/
 
 # build
 .next
@@ -22,9 +19,14 @@ apps/fo/.next/**/*
 #.env*
 .qodo
 
+# next-agents-md
+.next-docs/
+
 pnpm-lock.yaml
 settings.json
 .npmrc
 .cursor
+.agent
 
 apps/**/tsconfig.tsbuildinfo
+logs/

.husky/pre-push

@@ -1,8 +1,10 @@
 #!/bin/sh
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
-REMOTE_REF="origin/$BRANCH"
-if git rev-parse --verify "$REMOTE_REF" >/dev/null 2>&1; then
-  pnpm turbo run build --filter="...[$REMOTE_REF]"
-else
-  pnpm turbo run build
+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]"

apps/_template/.env.example

@@ -3,3 +3,6 @@ NEXT_PUBLIC_PORT=
 NEXT_PUBLIC_PROXY_HOST=
 NEXT_PUBLIC_SITE_ID=
 NEXT_PUBLIC_SERVER_API_URL=
+
+# 401 시 브라우저 리다이렉트 대상
+NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL=/auth/login

apps/_template/package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cm/package.json

@@ -52,7 +52,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cm/src/entities/auth/lib/auth-wrapper.tsx

@@ -5,16 +5,15 @@ import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
+import { isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
-    // 로그인 페이지에서는 인증 체크를 건너뜀
-    if (window.location.pathname === '/auth/login') {
+    if (isAtLoginRedirectUrl("/auth/login")) {
       return;
     }
 
@@ -35,13 +34,8 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
         setUserInfo(null);
+        if (!isAtLoginRedirectUrl("/auth/login")) {
           router.push("/auth/login");
         }
       }

apps/cm/src/pages/auth/login/ui/login-page.tsx

@@ -147,9 +147,9 @@ function LoginPage() {
             <h1>
               유역하수도통합플랫폼
               <br />
-              <span>통합관리시스템</span>
+              <span>하수도 포탈</span>
             </h1>
-            <p>유역하수도 통합플랫폼에 오신 것을 환영합니다.</p>
+            <p>유역하수도통합플랫폼 하수도 포탈에 오신 것을 환영합니다.</p>
           </div>
           <div className="img">
             <Image src={images.logo} width={229} height={46} alt="logo" />

apps/common/features/next.config.ts

@@ -1,6 +1,21 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  output: "standalone",
+  experimental: {
+    proxyTimeout: 600000,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },  
   async rewrites() {
     return {
       afterFiles: [

apps/common/features/package.json

@@ -46,7 +46,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/common/features/src/entities/auth/lib/auth-wrapper.tsx

@@ -4,13 +4,17 @@ import { useEffect } from "react";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
+import { getAuthLoginRedirectUrl, isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(getAuthLoginRedirectUrl())) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -28,8 +32,6 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-        await LoginApi.silentRefresh();
-        await authCheck();
       }
     })();
   }, []);

apps/cs/.gitignore

@@ -39,3 +39,4 @@ next-env.d.ts
 
 .env*
 !.env.example
+/start_cs.log

apps/cs/package.json

@@ -52,7 +52,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cs/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,18 +1,24 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
+import { isAtLoginRedirectUrl } from "@common/network";
+import {
+  ENDPOINT,
+  AUTH_USER_ID,
+  AUTH_LOGIN_REDIRECT_URL,
+} from "@/shared/config";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -30,14 +36,9 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
         setUserInfo(null);
-          router.push("/auth/login");
+        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
         }
       }
     })();

apps/cs/src/pages/loginlog/ui/loginlog-page.tsx

@@ -39,10 +39,10 @@ function LoginlogPage() {
   const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
-  const [errOcrnYn, setErrOcrnYn] = useState("N");
+  const [errOcrnYn, setErrOcrnYn] = useState("ALL");
   const [searchParams, setSearchParams] = useState<LoginlogParams>({
     userId: "",
-    errOcrnYn: "N",
+    errOcrnYn: "",
     searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
     searchDateTo: dayjs().format("YYYY-MM-DD"),
     sort: "lgnDt,desc",
@@ -87,7 +87,7 @@ function LoginlogPage() {
     setSearchParams({
       ...searchParams,
       userId,
-      errOcrnYn,
+      errOcrnYn: errOcrnYn === "ALL" ? "" : errOcrnYn,
       searchDateFrom: dateRange.from
         ? dayjs(dateRange.from).format("YYYY-MM-DD")
         : "",
@@ -102,12 +102,12 @@ function LoginlogPage() {
 
   const handleReset = () => {
     setUserId("");
-    setErrOcrnYn("N");
+    setErrOcrnYn("ALL");
     setDateRange(defaultDateRange);
     setSearchParams({
       ...searchParams,
       userId: "",
-      errOcrnYn: "N",
+      errOcrnYn: "",
       searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
       searchDateTo: dayjs().format("YYYY-MM-DD"),
     });
@@ -180,6 +180,7 @@ function LoginlogPage() {
               <SelectValue placeholder="선택" />
             </SelectTrigger>
             <SelectContent>
+              <SelectItem value="ALL">전체</SelectItem>
               <SelectItem value="N">정상</SelectItem>
               <SelectItem value="Y">오류</SelectItem>
             </SelectContent>

apps/cs/src/shared/config/env.ts

@@ -2,6 +2,8 @@ export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST =
   process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
 export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "CS";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =

apps/dc/package.json

@@ -41,7 +41,7 @@
     "@types/node": "^22.17.0",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/dc/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,20 +1,24 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
-
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+import { isAtLoginRedirectUrl } from "@common/network";
+import {
+  ENDPOINT,
+  AUTH_USER_ID,
+  AUTH_LOGIN_REDIRECT_URL,
+} from "@/shared/config";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -32,14 +36,9 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
         setUserInfo(null);
-          router.push("/auth/login");
+        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
         }
       }
     })();

apps/dc/src/shared/config/env.ts

@@ -3,10 +3,14 @@ export const PROXY_HOST =
   process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
 
 export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
-export const NEXT_PUBLIC_DC_SERVICE_API_URL = process.env.NEXT_PUBLIC_DC_SERVICE_API_URL || `http://localhost:${PORT}`;
+export const NEXT_PUBLIC_DC_SERVICE_API_URL =
+  process.env.NEXT_PUBLIC_DC_SERVICE_API_URL || `http://localhost:${PORT}`;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 
 // Flask API URL
-export const FLASK_API_URL = process.env.NEXT_PUBLIC_FLASK_API_URL || "http://localhost:5000";
+export const FLASK_API_URL =
+  process.env.NEXT_PUBLIC_FLASK_API_URL || "http://localhost:5000";
 
 //export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DC";
 export const SITE_ID = "DC";

apps/dm/app/(popup-layout)/map/popup/page.tsx

@@ -235,6 +235,7 @@ const Map = () => {
     <>
       <div className="bg-container">
         <Gis
+          showZoomLevel={true}
           height='h-screen'
           treeData={treeData}
           isSearch={false}

apps/dm/package.json

@@ -29,7 +29,7 @@
     "@eslint/eslintrc": "^3",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

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

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

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

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,9 +460,11 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="이전"
           >
-            <img
+            <Image
               src="/images/landing/icon_left_arrow.png"
               alt="이전"
+              width={24}
+              height={24}
               className="w-6 h-6 object-contain"
             />
           </button>
@@ -480,9 +483,11 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="다음"
           >
-            <img
+            <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>

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,9 +87,11 @@ 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
+            <Image
               src="/images/landing/icon_left_arrow.png"
               alt="이전"
+              width={12}
+              height={22}
               className="w-[12px] h-[22px]"
             />
           </button>
@@ -102,9 +105,11 @@ 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
+            <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>

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,9 +90,11 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
                         isOpen ? "rotate-180" : "rotate-0",
                     ].join(" ")}
                     >
-                    <img
+                    <Image
                       src="/images/landing/drop_arrow.svg"
                       alt="드롭다운 화살표 아이콘"
+                      width={28}
+                      height={28}
                       className="w-7 h-7"
                     />
                   </span>

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>
                 </>

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;
 }

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>

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,7 +22,13 @@ 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>

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,9 +66,11 @@ 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
+                    <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"
                     />
 

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>

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);
+}

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,12 +185,233 @@ 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={[
@@ -64,27 +421,21 @@ export default function DemandRegisterPage() {
           ]}
         />
 
-            {/* 컨텐츠 영역 */}
         <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="" />
+              <TextInput value={reqQty} onChange={setReqQty} />
             </FormRow>
-
             <Divider />
 
             <FormRow label="사용용도" required>
               <TextInput value={usePurpose} onChange={setUsePurpose} />
             </FormRow>
-
             <Divider />
 
             <FormRow label="희망단가(원)" required>
@@ -92,9 +443,8 @@ export default function DemandRegisterPage() {
             </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">
+            <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"
@@ -103,7 +453,7 @@ export default function DemandRegisterPage() {
               >
                 수질기준 참고
               </button>
-                        {/* 수질기준참고 모달 */}
+
               <WaterQualityRefModal
                 open={openRef}
                 onClose={() => setOpenRef(false)}
@@ -112,9 +462,7 @@ export default function DemandRegisterPage() {
             </div>
           </div>
 
-                {/* 요구수질 테이블 */}
           <div className="border border-neutral-200 bg-white">
-                    {/* 1행 */}
             <QualityRow
               leftLabel="총대장균군수(개/mg)"
               leftRequired
@@ -141,51 +489,34 @@ export default function DemandRegisterPage() {
                 </div>
               }
               rightLabel="총질소(T-N)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
-                        }
+              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="이하" />
-                        }
+              rightControl={<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />}
             />
             <Divider />
 
-                    {/* 3행 */}
             <QualityRow
               leftLabel="탁도(NTU)"
               leftRequired
-                        leftControl={
-                        <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
-                        }
+              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"
-                            />
+                  <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"
-                            />
+                  <TextInput value={ph.max} onChange={(v) => setPh((p) => ({ ...p, max: v }))} className="w-32" />
                 </div>
               }
             />
             <Divider />
 
-                    {/* 4행 */}
             <QualityRow
               leftLabel={
                 <>
@@ -201,7 +532,6 @@ export default function DemandRegisterPage() {
             />
             <Divider />
 
-                    {/* 5행 */}
             <QualityRow
               leftLabel="냄새"
               leftRequired
@@ -221,7 +551,6 @@ export default function DemandRegisterPage() {
             />
             <Divider />
 
-                    {/* 6행 */}
             <QualityRow
               leftLabel="색도(도)"
               leftRequired
@@ -237,7 +566,6 @@ export default function DemandRegisterPage() {
             />
             <Divider />
 
-                    {/* 후보지 선택 */}
             <div className="grid grid-cols-12">
               <LabelCell>
                 공급처 후보지 선택
@@ -259,15 +587,13 @@ export default function DemandRegisterPage() {
                     >
                       후보지 조회
                     </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("유사사례");
-                                    }}
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenSimilar(true)}
                     >
-                                    유사사례
+                      유사사례 조회
                     </button>
                   </div>
                 </div>
@@ -275,38 +601,39 @@ export default function DemandRegisterPage() {
             </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("수요정보 등록");
-                        }}
+              onClick={() => 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);
         }}
       />
+
+      {/* 유사사례 모달 */}
+      <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,7 +804,13 @@ 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>

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) => {
@@ -337,6 +337,28 @@ 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>
             )}

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>

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>

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>

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>

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>

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>
 

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>

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 className="pt-[83px]">
+      {hasLnb && <TopNav />}
+      <main className={hasLnb ? "ml-[260px]" : ""}>{children}</main>
     </div>
-    </>
   );
 }

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">

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,231 +25,37 @@ 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 (
     <>
     
@@ -320,8 +65,8 @@ function DemandRegisterPageContent() {
             <SubPageHeader
                 title="수요정보등록"
                 crumbs={[
-            { label: "Home", href: "/main" },
-            { label: "수요신청", href: "/apply/status" },
+                { label: "Home", href: "/reuse" },
+                { label: "수요신청", href: "/reuse/apply" },
                 { label: "수요정보등록" },
                 ]}
             />
@@ -517,10 +262,7 @@ function DemandRegisterPageContent() {
                                 <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 });
-                                }}
+                                    onClick={() => setOpenCand(true)}
                                 >
                                     후보지 조회
                                 </button>
@@ -544,25 +286,35 @@ function DemandRegisterPageContent() {
                 <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}
+                        className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+                        onClick={() => {
+                        // TODO: 저장 처리
+                        console.log("수요정보 등록");
+                        }}
                     >
-                    {editMode ? "수요정보 수정" : "수요정보 등록"}
+                        수요정보 등록
                     </button>
                 </div>
 
             </div>
         </main>
-    </>
-  );
-}
 
-export default function DemandRegisterPage() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <DemandRegisterPageContent />
-    </Suspense>
+        <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);
+            }}
+        />
+    </>
   );
 }
 

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,21 +159,18 @@ export default function DemandStatusPage() {
 
   return (
     <main className="bg-white">
-        {/* 서브 타이틀 + 브레드크럼 */}
       <SubPageHeader
         title="수요신청현황"
         crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "수요신청", href: "/reuse/apply" },
+          { 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>
 
@@ -215,23 +190,25 @@ export default function DemandStatusPage() {
               </thead>
 
               <tbody className="bg-white text-base text-slate-700">
-                        {rows.length === 0 ? (
+                {transformedSdmInfoStatusList.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;
+                  transformedSdmInfoStatusList.map((sdmInfoStatus, index) => {
+                    const active = sdmInfoStatus.dmdInfoSn === selectedSdmInfoStatus?.dmdInfoSn;
                     return (
                       <tr
-                                key={r.id}
-                                role="button"
+                        key={`${sdmInfoStatus.dmdInfoSn}-${index}`}
+                        role="row"
                         tabIndex={0}
-                                onClick={() => onSelectRow(r.id)}
+                        onClick={() => onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn)}
                         onKeyDown={(e) => {
-                                if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
+                          if (e.key === "Enter" || e.key === " ") {
+                            onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn);
+                          }
                         }}
                         className={[
                           "border-t border-neutral-200 outline-none",
@@ -241,15 +218,15 @@ export default function DemandStatusPage() {
                         ].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">{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={r.status} />
+                          <StatusBadge v={formatValue(sdmInfoStatus.status)} />
                         </td>
                       </tr>
                     );
@@ -260,11 +237,18 @@ export default function DemandStatusPage() {
           </div>
         </section>
 
-            {/* 상세현황 */}
         <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 ? (
+          {!selectedSdmInfoStatus ? (
             <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
               상세 정보를 표시할 신청건이 없습니다.
             </div>
@@ -275,59 +259,77 @@ export default function DemandStatusPage() {
               </div>
 
               <div className="grid grid-cols-12 text-sm">
-                    {/* 상단 2행 */}
-                    {topFields.map((f) => (
+                {topFields.map((field) => (
                   <div
-                        key={f.label}
+                    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">
-                        {f.label}
-                        {f.required ? <span className="ml-1 text-red-500">*</span> : null}
+                      {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">
-                        {f.value}
+                      {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) => (
+                {waterFields.map((field) => (
                   <div
-                        key={f.label}
+                    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">
-                        {f.label}
+                      {field.label}
                     </div>
                     <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {f.value}
+                      {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>
 
-                    {selected.detail.candidates.map((v, i) => (
+                {candidateNames.map((candidateName, index) => (
                   <div
-                        key={`candidate-${i}`}
+                    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">
-                        후보지{i + 1}
+                      후보지{index + 1}
                     </div>
                     <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {v}
+                      {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>
+
+                <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>
           )}

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>

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>

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>
   );
 }

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>

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>

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>
+      <div className="pt-[83px]">{/* TopNav 높이만큼 */}
         <TopNav />
-      <div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
+        <main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
+      </div> 
     </StoreProvider>
   );
 }

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>

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>

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>

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;
 }

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>

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,7 +22,13 @@ 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>

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,9 +66,11 @@ 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
+                    <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"
                     />
 

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">

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>
+  );
+}

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,9 +87,11 @@ 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
+            <Image
               src="/images/landing/icon_left_arrow.png"
               alt="이전"
+              width={12}
+              height={22}
               className="w-[12px] h-[22px]"
             />
           </button>
@@ -102,9 +105,11 @@ 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
+            <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>

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,9 +460,11 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="이전"
           >
-            <img
+            <Image
               src="/images/landing/icon_left_arrow.png"
               alt="이전"
+              width={24}
+              height={24}
               className="w-6 h-6 object-contain"
             />
           </button>
@@ -480,9 +483,11 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="다음"
           >
-            <img
+            <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>

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,9 +87,11 @@ 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
+            <Image
               src="/images/landing/icon_left_arrow.png"
               alt="이전"
+              width={12}
+              height={22}
               className="w-[12px] h-[22px]"
             />
           </button>
@@ -102,9 +105,11 @@ 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
+            <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>

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>

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" } : {}),
   }},
 ];

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": {
@@ -29,7 +29,7 @@
     "@eslint/eslintrc": "^3",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",  
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

apps/fo/.env.local

@@ -16,8 +16,8 @@ NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service  # 개발 서버 API
 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_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-
+# NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /
 
 #NEXT_PUBLIC_SERVER_API_URL = http://localhost:8883/operation-service
 

apps/fo/.env.production

@@ -17,3 +17,4 @@ NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000/dc-s
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 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_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login

apps/fo/app/pages/(map-layout)/map/page.tsx

@@ -295,6 +295,7 @@ const Map = () => {
   return (
     <div className="bg-container">
       <Gis
+        showZoomLevel={true}
         treeData={treeData}
         isSearch={false}
         gisMaps={gisMaps}

apps/fo/app/pages/(with-layout)/layout.tsx

@@ -21,7 +21,6 @@ export default function RootLayout({
     setCurrentMenuInfo(id);
     getMenuAuth(id.menuCd);
     router.push(id.urlPath);
-    console.log(id);
   };
 
   return (

apps/fo/app/pages/(with-layout)/processFacility/page.tsx

@@ -7,7 +7,8 @@
 "use client"
 import UnderComment from "@/app/components/common/UnderComment";
 import { StoreContext, useFoStore } from "@/app/store";
-import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox
+  , UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";

apps/fo/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3"

apps/fo/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,21 +1,23 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { client } from "@/src/shared/api";
 import type { IUserInfo } from "@/src/shared/store";
+import { isAtLoginRedirectUrl } from "@common/network";
 import { useUserStore, getCookie } from "@/src/shared/lib";
 import { ENDPOINT, AUTH_USER_ID } from "@/src/shared/config";
-import { LoginApi } from "../api/login-service";
 
-const LOGIN_PAGE_URL = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "http://localhost:3001/auth/login"; // 개발 환경 URL
+const LOGIN_PAGE_URL =
+  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
-  // const pathname = usePathname();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -33,24 +35,29 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
         setUserInfo(null);
-
-          const hostname = window.location.hostname;
-
-          // 개발 환경에서는 localhost 도메인 사용
-          if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr")
-            router.push("/"); // 개발시 홈으로 돌아가기
-
-          // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-          // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-          if (hostname.includes("hasuon.or.kr")) window.location.href = LOGIN_PAGE_URL; // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
+          return;
         }
+
+        // const hostname = window.location.hostname;
+
+        // // 개발 환경에서는 localhost 도메인 사용
+        // if (
+        //   hostname === "localhost" ||
+        //   hostname === "127.0.0.1" ||
+        //   hostname === "con.mind-one.co.kr"
+        // ) {
+        //   router.push("/"); // 개발시 홈으로 돌아가기
+        // }
+
+        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
+        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
+        // if (hostname.includes("hasuon.or.kr"))
+        //   window.location.assign(LOGIN_PAGE_URL); // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+
+        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
+        window.location.assign(LOGIN_PAGE_URL);
       }
     })();
   }, []);

apps/sn/.env.local

@@ -14,7 +14,8 @@ NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&ver
 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083
 NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+# NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.222:8883
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883

apps/sn/.env.production

@@ -15,4 +15,4 @@ 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_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000
-
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login

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
+

apps/sn/app/(map-layout)/map/components/common/index.ts

@@ -1,5 +1,5 @@
-import MsSwagePpl from "../popupComponent/MsSwagePpl";
-import sewagePump from "../popupComponent/sewagePump";
+import MsSwagePpl from "../popupComponent/MsSwagePpl"; // 하수관로
+import sewagePump from "../popupComponent/sewagePump"; // 하수펌프
 import smh from "../popupComponent/smh";
 import Ssc from "../popupComponent/Ssc";
 import StormWaterPump from "../popupComponent/stormWaterPump";

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 = [

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -1,268 +1,279 @@
 'use client'
-import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+
+import {
+  CHART_FORM,
+  type ChartConfig,
+  MainChart,
+  UiModal,
+} from '@common/business_components';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import React, { useEffect, useState } from 'react';
-import moment from "moment";
 
 import type { TInftwtAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
+import { useInfilChartModalStore } from '../chartModalStore';
+
 type ModalOpenProp = {
-  pplMngNo?: string, // 관로관리번호
-}
-type DataType = { label: string; val: number };
-
-const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
-  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어
-  const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 
-  const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
-  const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
-  const [selectedAplcnYm, setSelectedAplcnYm] = useState("");
-  const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
-  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
-  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
-  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0); // 침입수분석 정보 선택시 사용
-  const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({
-    chartData1: [], chartData2: [],
-  });
-  const [inftwtQty, setInftwtQty] = useState<string>("0"); // 침입수량
-  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
-
-  pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여
-  const openPopup = () => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
-      setPopupPosition({
-        top: rect.bottom + window.scrollY, // 버튼 아래쪽
-        left: rect.left + window.scrollX, // 버튼 왼쪽
-      });
-    }
-    setPopupOpen(true); // 팝업 열기
+  pplMngNo?: string; // 관로관리번호
 };
 
+type DataType = {
+  label: string;
+  val: number;
+};
+
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore();
+
+  const [selectedAplcnYm, setSelectedAplcnYm] = useState('');
+  const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
+  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
+  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null);
+  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0);
+  const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({
+    chartData1: [],
+    chartData2: [],
+  });
+  const [inftwtQty, setInftwtQty] = useState<string>('0');
+
+  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt');
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
+
   const chartForm = CHART_FORM.LINE;
   const chartConfig = {
-    chartData1: { label: '순오수량', color: "red", },
-    chartData2: { label: '실측하수량', color: "orange", }
+    chartData1: { label: '순오수량', color: 'red' },
+    chartData2: { label: '실측하수량', color: 'orange' },
   } as ChartConfig;
 
+  const hasChartData = useMemo(() => {
+    return chartData.chartData1.length > 0 || chartData.chartData2.length > 0;
+  }, [chartData]);
+
+  const resetState = () => {
+    setSelectedAplcnYm('');
+    setInftwtAnlss([]);
+    setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+    setInftwtAnls(null);
+    setSelectedInftwtAnls(0);
+    setChartData({ chartData1: [], chartData2: [] });
+    setInftwtQty('0');
+  };
+
   useEffect(() => {
-    if (isModalOpen === false) {
-      setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기
-      setSelectedAplcnYm(""); // 상수사용월 초기화
-      setInftwtAnlss([]); // 침입수분석 초기화
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화
-      setInftwtAnls(null); // 침입수분석정보 초기화
-      setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화
-      setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화
-      setInftwtQty("0"); // 침입수량 초기화
+    if (!isModalOpen) {
+      resetState(); // 모달이 닫힐 때 리셋
     }
   }, [isModalOpen]);
 
-  // 상수사용월 변경 핸들러
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
 
     setSelectedAplcnYm(selectedValue);
-
-    // 즉시 관련 상태 초기화
+    setInftwtAnlss([]);
     setInftwtAnls(null);
+    setSelectedInftwtAnls(0);
+    setInftwtQty('0');
+    setChartData({ chartData1: [], chartData2: [] });
 
-    // 빈 값이면 초기화만 하고 종료
-    if (!selectedValue || selectedValue === "0" || selectedValue === "") {
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
+    if (!selectedValue || selectedValue === '0') {
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
       return;
     }
 
-    // API 호출
     try {
       const data = await fn.selectInftwtAnls(selectedValue);
-      setInftwtAnlss(data ?? []);
-      setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data));
+      const list = data ?? [];
+      setInftwtAnlss(list);
+      setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(list));
     } catch (error) {
-      console.error("selectInftwtAnls 에러:", error);
+      console.error('selectInftwtAnls 에러:', error);
       setInftwtAnlss([]);
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     }
-    setSelectedInftwtAnls(0);
   };
 
-  // 분석정보 변경 핸들러
   const handleInftwtAnlsSnChange = (val: string | number) => {
     const selectedValue = Number(val);
-    setSelectedInftwtAnls(selectedValue);
 
-    // 선택된 침입수분석 정보에 대한 처리 로직
+    setSelectedInftwtAnls(selectedValue);
+    setChartData({ chartData1: [], chartData2: [] });
+    setInftwtQty('0');
+
     if (selectedValue === 0) {
       setInftwtAnls(null);
       return;
     }
 
-    const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === selectedValue);
-    if (selectedAnls) {
+    const selectedAnls = inftwtAnlss.find((anls) => anls.inftwtAnlsSn === selectedValue) ?? null;
     setInftwtAnls(selectedAnls);
+  };
+
+  const infilRsltChart = async () => {
+    if (!selectedAplcnYm || selectedInftwtAnls === 0 || !normalizedPplMngNo) {
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
+      return;
+    }
+
+    try {
+      const [inftwtAnlsRslt, oilq, qty] = await Promise.all([
+        fn.selectInftwtAnlsRslt(selectedInftwtAnls, normalizedPplMngNo),
+        fn.selectOilq(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
+          console.error('selectOilq 에러:', err);
+          return [];
+        }),
+        fn.selectPplInftwtQty(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
+          console.error('selectPplInftwtQty 에러:', err);
+          return 0;
+        }),
+      ]);
+
+      setChartData({
+        chartData1: fn.getChartDataInftwtAnlsRslt(inftwtAnlsRslt ?? []),
+        chartData2: fn.getChartDataOilq(oilq ?? []),
+      });
+
+      const normalizedQty = Number(qty ?? 0);
+      setInftwtQty(normalizedQty.toLocaleString('ko-KR'));
+    } catch (error) {
+      console.error('infilRsltChart 에러:', error);
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
     }
   };
 
-  const closePopup = () => {  // 팝업 닫기
-    setPopupOpen(false);
-  }
-  const infilRsltChart = () => {  // 그래프 & 팝업 닫기
+  const renderInfoInput = (label: string, value?: string | number | null) => (
+    <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+      <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
+      <Input
+        className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl md:text-xl text-[#2b3440]"
+        placeholder=""
+        value={value ?? ''}
+        readOnly
+      />
+    </div>
+  );
 
-    fn.selectInftwtAnlsRslt(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수분석 결과 조회
-      const rsltData = fn.getChartDataInftwtAnlsRslt(data ?? []);
-      setChartData(prev => ({
-        ...prev,
-        chartData1: rsltData // 침입수분석결과
-      }));
-    });
-    fn.selectOilq(selectedInftwtAnls, pplMngNo).then((data) => {// 유량 조회
-      const rsltData = fn.getChartDataOilq(data ?? []);
-      setChartData(prev => ({
-        ...prev,
-        chartData2: rsltData // 유량
-      }));
-    }).catch((err) => {
-      console.error("selectOilq 에러:", err);
-      setChartData(prev => ({
-        ...prev,
-        chartData2: [] // 유량 데이터 초기화
-      }));
-    });
-    fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회
-      if (data > 0) {
-        setInftwtQty(data.toLocaleString('ko-KR'));
+  const handleReset = () => {
+    resetState();
   }
-    });
-    setPopupOpen(false);
-  };
 
   const renderBody = () => (
-    <>
-      <div className="text-black text-3xl font-bold mb-5">침입수분석결과</div>
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
+      </div>
 
-      <div className='grid grid-cols-[1fr_3fr] gap-4'>
-        <div className="h-[90%] grid grid-rows-4 gap-4 mb-4">
-          <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
-            분석 입력현황 조회
-          </Button>
-          {/* 상수사용량 적용연월 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl font-bold">
-                {(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""}
-              </span>
-            </div>
-          </div>
-          {/* 침입수량 분석결과 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 침입수량 산정결과</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl">침입수량 : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold">{inftwtQty}</span>
-              <span className="ml-2 text-black text-xl">m³/d</span>
-            </div>
-          </div>
-        </div>
-        {/* 차트 */}
-        <div className="h-[90%] bg-white text-3xl">
-          <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'침입수량 그래프'} 
-            yFieldText2="" yFieldText="유량(m³/h)"/>
-        </div>
-      </div>
-      {popupOpen && (
-        <div
-          className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
-          style={{
-            top: popupPosition.top,
-            left: popupPosition.left,
-            zIndex: 1000,
-          }}
-        >
-          <div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
-          <div className='flex flex-col'>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
+      <div className="grid min-h-[68vh] grid-cols-[minmax(0,38%)_minmax(0,62%)] gap-5">
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+            침입수 분석 선택 조건
+          </h3>
+
+          <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
+            <div className="space-y-3">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+                <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
+                  상수사용월:
+                </Label>
                 <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
                   selectArray={aplcnYms}
                   value={selectedAplcnYm}
                   onSelectValue={handleAplcnYmChange}
                 />
               </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
+
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+                <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
+                  분석정보:
+                </Label>
                 <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
                   selectArray={inftwtAnlsInfos}
                   value={selectedInftwtAnls}
                   onSelectValue={handleInftwtAnlsSnChange}
                 />
               </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.drtwSwtcRt ?? ""}
-                readOnly={true}
+
+              {renderInfoInput('오수전환율:', inftwtAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('시간패턴 파일명:', inftwtAnls?.atflHrPttnNm ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', inftwtAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', inftwtAnls?.atflInpNm ?? '')}
+              {renderInfoInput('유량 파일명:', inftwtAnls?.atflOilqNm ?? '')}
+            </div>
+          </div>
+
+          <div className="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button size="lg" onClick={infilRsltChart} >
+              조회
+            </Button>&nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={handleReset} >
+              초기화
+            </Button>
+          </div>
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
+
+          <div className="mb-6 grid grid-cols-2 gap-5">
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                {/* <span className="text-[14px] leading-none">●</span> */}
+                <span>상수사용량 적용연월</span>
+              </div>
+              <div className="text-[20px] font-extrabold text-[#222]">
+                {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+              </div>
+            </div>
+
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                {/* <span className="text-[14px] leading-none">●</span> */}
+                <span>침입수량 산정결과</span>
+              </div>
+              <div className="grid grid-cols-[1fr_auto] items-center gap-7 text-[#222]">
+                <span className="text-[16px] text-[#666]">침입수량</span>
+                <div className='w-[66px] flex items-end justify-start gap-2'>
+                    <span className="text-[20px] font-extrabold">{inftwtQty}</span>
+                    <span className="pb-[2px] text-[16px]">m³/d</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+            {hasChartData ? (
+              <MainChart
+                chartConfig={chartConfig}
+                chartForm={chartForm}
+                chartData={chartData}
+                chartTitle={'침입수량 그래프'}
+                yFieldText="유량(m³/h)"
+                yFieldText2=""
               />
+            ) : (
+              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                데이터가 없습니다.
               </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">시간패턴 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflHrPttnNm ?? ""}
-                readOnly={true}
-              />
+            )}
           </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflMpngNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflInpNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">유량 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflOilqNm ?? ""}
-                readOnly={true}
-              />
+        </section>
       </div>
     </div>
-          <div className="flex justify-end mt-4 space-x-2">
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
-              닫기
-            </button>
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={infilRsltChart}>
-              선택조건 적용
-            </button>
-          </div>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+  );
 
   return (
     <UiModal
@@ -270,17 +281,17 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
+        w-[78vw]
         max-w-none
-            max-h-none
+        min-w-[1000px]
+        min-h-[72vh]
         overflow-visible
         z-[50]
       `}
       body={renderBody()}
-      noFooterYn='Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
 export default React.memo(InfilChart);

apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx

@@ -1,282 +1,339 @@
 'use client'
-import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+
+import {
+  CHART_FORM,
+  type ChartConfig,
+  MainChart,
+  UiModal,
+} from '@common/business_components';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import React, { useEffect, useState } from 'react';
-import moment from "moment";
 
 import type { TRdiiAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
+import { useRdiiChartModalStore } from '../chartModalStore';
 
 type ModalOpenProp = {
-  pplMngNo: string, // 관로관리번호
-}
-// 차트
-type lineBarChartData = {
+  pplMngNo?: string; // 관로관리번호
+};
+
+type LineBarChartData = {
   label: string;
   lineVal0: number;
   barVal0: number;
-}
+};
 
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
 
-const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
-  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어
-  const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업
-  const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
-  const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
-  const [aplcnYm, setAplcnYm] = useState("");
+const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore();
+
+  const [aplcnYm, setAplcnYm] = useState('');
   const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
-  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options
+  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
   const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
   const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0);// 강우유입수분석 정보 선택시 사용
-  const [chartData, setChartData] = useState<lineBarChartData[]>([]);
-  const [rdiiQty, setRdiiQty] = useState<string>("0"); // 강우유입수량
-  const [rainTotal, setRainTotal] = useState<string>("0"); // 적용강우량
-  const [totalVolume, setTotalVolume] = useState<string>("0"); // 총체적 m³/mm
-  const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
-  pplMngNo = "L"+pplMngNo; // "L13101003";
+  const [chartData, setChartData] = useState<LineBarChartData[]>([]);
+  const [rdiiQty, setRdiiQty] = useState<string>('0');        // 강우유입수량
+  const [rainTotal, setRainTotal] = useState<string>('0');    // 적용강우량
+  const [totalVolume, setTotalVolume] = useState<string>('0');// 총체적 m³/mm
 
-  const openPopup = () => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
-      setPopupPosition({
-        top: rect.bottom + window.scrollY, // 버튼 아래쪽
-        left: rect.left + window.scrollX, // 버튼 왼쪽
-      });
-    }
-    setPopupOpen(true); // 팝업 열기
-  };
+  const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
 
   const chartForm = CHART_FORM.LINEBAR2;
   const chartConfig = {
     barVal0: {
       label: '강수량',
-      color: "#33AAFF",
+      color: '#33AAFF',
     },
     lineVal0: {
       label: 'RDII',
-      color: "#FF0000",
+      color: '#FF0000',
     },
   } as ChartConfig;
 
-  useEffect(() => {
-    if (isModalOpen === false) {
-      setPopupOpen(true); // 모달이 닫힐 때 팝업은
-      setAplcnYm(""); // 상수사용월 초기화
+  const hasChartData = useMemo(() => chartData.length > 0, [chartData]);
+
+  const resetState = () => {
+    setAplcnYm(''); // 상수사용월 초기화
     setRdiiAnlss([]); // 강우유입수분석 초기화
-      setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
+    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); // 강우유입수분석정보 초기화
     setRdiiAnls(null); // 강우유입수분석정보 초기화
     setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
-      setChartData([]); // 차트 데이터 초기화
-      setRdiiQty("0"); // 강우유입수량 초기화
-      setRainTotal("0"); // 적용강우량 초기화
-      setTotalVolume("0"); // 총체적 m³/mm 초기화
+    setChartData([]);
+    setRdiiQty('0');  // 강우유입수량 초기화
+    setRainTotal('0');// 적용강우량 초기화
+    setTotalVolume('0');// 총체적 m³/mm 초기화
+  };
+
+  useEffect(() => {
+    if (!isModalOpen) {
+      resetState();
     }
   }, [isModalOpen]);
 
-  // 상수사용월 변경시 분석 정보 리스트 가져오기
-  useEffect(() => {
-    // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음
-    if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") {
-      setRainInfwtAnlsSn(0); // 초기화
-      setRdiiAnlsInfos([]);
+  const handleAplcnYmChange = async (val: string | number) => {
+    const selectedValue = String(val);
+
+    setAplcnYm(selectedValue);
+    setRdiiAnlss([]);
+    setRdiiAnls(null);
+    setRainInfwtAnlsSn(0);
+    setChartData([]);
+    setRdiiQty('0');
+    setRainTotal('0');
+    setTotalVolume('0');
+
+    if (!selectedValue || selectedValue === '0') {
+      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
       return;
     }
-    fn.selectRdiiAnls(aplcnYm)
-      .then((data) => {
-        setRdiiAnlss(data ?? []); // 선택한 월의 분석성공한 RDII분석데이터[]
-        setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(data));
-        setRdiiAnls(null); // 오수전환율 이후 초기화
-        setRainInfwtAnlsSn(0); // 초기화
-      })
-      .catch((error) => {
-        console.error("selectrdiiAnls 에러:", error);
+
+    try {
+      const data = await fn.selectRdiiAnls(selectedValue); // 상수사용월 변경시 분석 정보 리스트 가져오기
+      const list = data ?? [];
+      setRdiiAnlss(list);
+      setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list));
+    } catch (error) {
+      console.error('selectRdiiAnls 에러:', error);
       setRdiiAnlss([]);
-        setRdiiAnlsInfos([]);
-      });
-  }, [aplcnYm]);
-
-  // 값 표시
-  useEffect(() => {
-    // 선택된 강우유입수분석 정보에 대한 처리 로직
-    if (rainInfwtAnlsSn === 0) return;
-    const selectedAnls = rdiiAnlss.find(anls => anls.rainInfwtAnlsSn === rainInfwtAnlsSn);
-    if (selectedAnls) {
-      setRdiiAnls(selectedAnls);
+      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     }
-  }, [rainInfwtAnlsSn, rdiiAnlss]);
-
-  const closePopup = () => {  // 팝업 닫기
-    setPopupOpen(false);
-  }
-  const rdiiRsltChart = () => {  // 그래프 & 팝업 닫기
-    fetchFilteredData();
-    fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회
-      setRdiiQty(Math.round(data?.rdiih*24).toLocaleString('ko-KR')); // cmd: m³/d 단위로 변환
-      if (data?.raintotal && data?.rainTotal !== 0) {
-        setRainTotal(data?.raintotal.toLocaleString('ko-KR')); // 총강우량mm
-        setTotalVolume(Math.round(data?.rdiih * data?.sustaintime / data?.raintotal).toLocaleString('ko-KR')); // 총체적 m³/mm
-      }
-    });
-    setPopupOpen(false);
   };
 
-  const fetchFilteredData: () => Promise<void> = async () => {
-    const rsltData = await fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo);
-    const rsltDataformatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []); // format 변경
-    const rainData = await fn.selectRainData(rainInfwtAnlsSn);
-    const rainDataformatted = fn.getChartDataRainData(rainData ?? []); // format 변경
-    const rainMap = new Map(rainDataformatted.map(item => [item.label, item.barVal0]));
+  const handleRdiiAnlsSnChange = (val: string | number) => {
+    const selectedValue = Number(val);
 
-    rsltDataformatted.forEach(item => {
+    setRainInfwtAnlsSn(selectedValue);
+    setChartData([]);
+    setRdiiQty('0');
+    setRainTotal('0');
+    setTotalVolume('0');
+
+    if (selectedValue === 0) {
+      setRdiiAnls(null);
+      return;
+    }
+
+    const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
+    setRdiiAnls(selectedAnls);
+  };
+
+  const fetchFilteredData = async () => {
+    if (!rainInfwtAnlsSn || !normalizedPplMngNo) {
+      setChartData([]);
+      setRdiiQty('0');
+      setRainTotal('0');
+      setTotalVolume('0');
+      return;
+    }
+
+    try {
+      const [rsltData, rainData, qtyData] = await Promise.all([
+        fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, normalizedPplMngNo),
+        fn.selectRainData(rainInfwtAnlsSn),
+        fn.selectPplRdiiQty(rainInfwtAnlsSn, normalizedPplMngNo),
+      ]);
+
+      const rsltDataFormatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []);
+      const rainDataFormatted = fn.getChartDataRainData(rainData ?? []);
+      const rainMap = new Map(rainDataFormatted.map((item) => [item.label, item.barVal0]));
+
+      rsltDataFormatted.forEach((item) => {
         const matchedVal = rainMap.get(item.label);
         if (matchedVal !== undefined) {
           item.barVal0 = matchedVal;
         }
       });
-    setChartData(rsltDataformatted); // 차트 데이터 설정
+
+      setChartData(rsltDataFormatted);// 차트 데이터 설정
+
+      const avgRdii = Number(qtyData?.rdiih ?? 0);
+      const appliedRainfall = Number(qtyData?.raintotal ?? 0);
+      const rdiiPerRainfall =
+        qtyData?.raintotal && qtyData?.raintotal !== 0
+          ? Math.round(avgRdii * Number(qtyData?.sustaintime ?? 0) / qtyData.raintotal)
+          : 0;
+
+      setRdiiQty(Math.round(avgRdii * 24).toLocaleString('ko-KR'));
+      setRainTotal(appliedRainfall.toLocaleString('ko-KR'));
+      setTotalVolume(rdiiPerRainfall.toLocaleString('ko-KR'));
+    } catch (error) {
+      console.error('rdiiRsltChart 에러:', error);
+      setChartData([]);
+      setRdiiQty('0');
+      setRainTotal('0');
+      setTotalVolume('0');
     }
+  };
+
+  const renderInfoInput = (label: string, value?: string | number | null) => (
+    <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+      <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+        {label}
+      </Label>
+      <Input
+        className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl text-[#2b3440]"
+        placeholder=""
+        value={value ?? ''}
+        readOnly
+      />
+    </div>
+  );
+
   const renderBody = () => (
-    <>
-      <div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
-
-      <div className='grid grid-cols-[1fr_3fr] gap-4'>
-        <div className="grid grid-rows-4 gap-4 mb-4">
-          <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
-            분석 입력현황 조회
-          </Button>
-          {/* 상수사용량 적용연월 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl font-bold">
-                {(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""}
-              </span>
-            </div>
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
       </div>
 
-          {/* 강우유입수량 분석결과 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 강우유입수량 분석결과</span>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">평균RDII : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {rdiiQty}</span>
-              <span className="ml-2 text-black"> m³/d</span>
-            </div>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">적용강우량 : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {rainTotal}</span>
-              <span className="ml-2 text-black"> mm</span>
-            </div>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">강우량대비RDII : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {totalVolume}</span>
-              <span className="ml-2 text-black"> m³/mm</span>
-            </div>
-          </div>
-        </div>
-        {/* 차트 */}
-        <div className="h-[90%] bg-white text-2xl">
-          <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'RDII 그래프'}
-                    yFieldText2="강수량(mm)" yFieldText="유량(m³/h)" />
-        </div>
-      </div>
-      {popupOpen && (
-        <div
-          className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
-          style={{
-            top: popupPosition.top,
-            left: popupPosition.left,
-            zIndex: 1000,
-          }}
-        >
-          <div className="font-bold mb-6 text-3xl">강우유입수분석 입력현황</div>
-          <div className='flex flex-col'>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
+      <div className="grid min-h-[68vh] grid-cols-[minmax(0,36%)_minmax(0,64%)] gap-5">
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+            강우유입수분석 선택 조건
+          </h3>
+
+          <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
+            <div className="space-y-3">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+                  상수사용월:
+                </Label>
                 <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
                   selectArray={aplcnYms}
                   value={aplcnYm}
-                onSelectValue={(val) => {
-                  setAplcnYm(String(val));
-                }}
+                  onSelectValue={handleAplcnYmChange}
                 />
               </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
+
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+                  분석정보:
+                </Label>
                 <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
                   selectArray={rdiiAnlsInfos}
                   value={rainInfwtAnlsSn}
-                onSelectValue={(val) => {
-                  setRainInfwtAnlsSn(Number(val));
-                }}
+                  onSelectValue={handleRdiiAnlsSnChange}
                 />
               </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.drtwSwtcRt ?? ""}
-                readOnly={true}
+
+              {renderInfoInput('오수전환율:', rdiiAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', rdiiAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', rdiiAnls?.atflInpNm ?? '')}
+              {renderInfoInput('강우 파일명:', rdiiAnls?.atflRainNm ?? '')}
+              {renderInfoInput('RTK계수 출처:', rdiiAnls?.srcNm ?? '')}
+            </div>
+          </div>
+
+          <div className="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button size="lg" onClick={fetchFilteredData}>
+              조회
+            </Button>
+            &nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={resetState}>
+              초기화
+            </Button>
+          </div>
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+            <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+                강우유입수분석 결과
+            </h3>
+
+            <div className="mb-6 flex gap-5">
+                {/* 좌측 카드 */}
+                <div className="flex min-h-[98px] min-w-0 basis-2/5 grow shrink-[1.4] items-center justify-between rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                  <div className="text-[16px] font-bold text-[#ef4444]">
+                      상수사용량 적용연월
+                  </div>
+                  <div className="text-[24px] font-extrabold leading-none text-[#111]">
+                      {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+                  </div>
+                </div>
+
+                {/* 우측 카드 */}
+                <div className="flex min-h-[98px] min-w-0 basis-3/5 grow shrink items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                    {/* 좌측: 제목 (세로 가운데 정렬) */}
+                    <div className="flex min-w-0 basis-[32%] items-center">
+                        <div className="text-[16px] font-bold text-[#ef4444] break-keep">
+                            강우유입수량 분석결과
+                        </div>
+                    </div>
+
+                    {/* 우측: 지표 영역 */}
+                    <div className="flex min-w-0 basis-[68%] flex-col gap-[2px]">
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                평균RDII
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rdiiQty}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/d
+                            </div>
+                        </div>
+
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                적용 강우량
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rainTotal}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                mm
+                            </div>
+                        </div>
+
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                강우량 대비 RDII
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {totalVolume}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/mm
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+                {hasChartData ? (
+                <MainChart
+                    chartConfig={chartConfig}
+                    chartForm={chartForm}
+                    chartData={chartData}
+                    chartTitle={'RDII 그래프'}
+                    yFieldText2="강수량(mm)"
+                    yFieldText="유량(m³/h)"
                 />
+                ) : (
+                <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                    데이터가 없습니다.
                 </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflMpngNm ?? ""}
-                readOnly={true}
-              />
+                )}
             </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflInpNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">강우 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflRainNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTK계수 출처:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.srcNm ?? ""}
-                readOnly={true}
-              />
+        </section>
       </div>
     </div>
-          <div className="flex justify-end mt-4 space-x-2">
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
-              닫기
-            </button>
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={rdiiRsltChart}>
-              선택조건 적용
-            </button>
-          </div>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+  );
 
   return (
     <UiModal
@@ -284,17 +341,17 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
+        w-[78vw]
         max-w-none
-            max-h-none
+        min-w-[1100px]
+        min-h-[72vh]
         overflow-visible
         z-[50]
       `}
       body={renderBody()}
-      noFooterYn = 'Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
 export default React.memo(RdiiChart);

apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx

@@ -28,6 +28,10 @@ import { VerticalTable } from "@/components/ui/verticalTable";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { Button } from "@common/components/ui";
 import { useEffect, useRef, useState, useMemo } from "react";
+import Style from "ol/style/Style.js";
+import Fill from "ol/style/Fill.js";
+import Stroke from "ol/style/Stroke.js";
+import CircleStyle from "ol/style/Circle.js";
 import { getLayerContentComponent } from "../common";
 import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "../common/table";
 import InfilChart from './chart/infilChart';
@@ -38,6 +42,27 @@ import { codeMapper } from "../common/codeMapper";
 import LoadingOverlay from '@/components/ui/LoadingBar';
 import { searchUpperPpls } from "./smh";
 
+const linkedFacilityHighlightStyle = new Style({
+  image: new CircleStyle({
+    radius: 18,
+    fill: new Fill({
+      color: 'rgba(255, 235, 59, 0.35)',
+    }),
+    stroke: new Stroke({
+      color: 'rgba(255, 193, 7, 0.45)',
+      width: 2,
+    }),
+  }),
+  fill: new Fill({
+    color: 'rgba(255, 235, 59, 0.2)',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 193, 7, 0.35)',
+    width: 2.5,
+  }),
+  zIndex: 9999,
+});
+
 
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
   const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
@@ -59,6 +84,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const [isLoading, setIsLoading] = useState(false); // 로딩 상태
   const [chmbrXcnts, setChmbrXcnts] = useState<string>(''); // 로딩 상태
   const [chmbrYdnts, setChmbrYdnts] = useState<string>(''); // 로딩 상태
+  const linkedFacilityFeatureRef = useRef<any>(null);
+  const linkedFacilityOriginalStyleRef = useRef<any>(null);
 
   // 🎯 관로관리번호 추출
   const pplMngNo = featureData?.values_?.fclt_mng_no || "";
@@ -77,6 +104,70 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     };
   }, [featureData?.values_]);
 
+  const clearLinkedFacilityHighlight = () => {
+    if (linkedFacilityFeatureRef.current) {
+      linkedFacilityFeatureRef.current.setStyle(linkedFacilityOriginalStyleRef.current ?? undefined);
+      linkedFacilityFeatureRef.current.changed?.();
+    }
+
+    linkedFacilityFeatureRef.current = null;
+    linkedFacilityOriginalStyleRef.current = null;
+  };
+
+  // 하수처리구역에 연결된 하수처리시설 피처를 찾아 기존 아이콘 위에 노랑 하이라이트를 덧씌운다.
+  const highlightLinkedFacility = (facilityCode: string | null | undefined) => {
+    clearLinkedFacilityHighlight();
+
+    if (!gisMap || !facilityCode) return;
+
+    const normalizedFacilityCode = String(facilityCode).trim();
+    const layers = gisMap.getLayers().getArray();
+
+    for (const layer of layers) {
+      const source = layer?.getSource?.();
+      if (!source?.getFeatures) continue;
+
+      const features = source.getFeatures();
+      const targetFeature = features.find((feature: any) => {
+        const featureId = feature?.getId?.();
+        const isFacilityLayer = typeof featureId === 'string' && featureId.startsWith('tb_il_swage_prcs_fclt.');
+        const featureFacilityCode = feature?.get?.('swtrmt_fclt_cd');
+
+        return isFacilityLayer && String(featureFacilityCode ?? '').trim() === normalizedFacilityCode;
+      });
+
+      if (targetFeature) {
+        const originalFeatureStyle = targetFeature.getStyle?.();
+        const featureLayer = targetFeature.getLayer?.();
+        const layerStyleFn = featureLayer?.getStyleFunction?.() ?? null;
+
+        linkedFacilityOriginalStyleRef.current = originalFeatureStyle;
+        linkedFacilityFeatureRef.current = targetFeature;
+        targetFeature.setStyle((feature: any, resolution: number) => {
+          let styles: any[] = [];
+
+          if (typeof originalFeatureStyle === 'function') {
+            const originalStyles = originalFeatureStyle(feature, resolution);
+            if (Array.isArray(originalStyles)) styles.push(...originalStyles);
+            else if (originalStyles) styles.push(originalStyles);
+          } else if (originalFeatureStyle) {
+            if (Array.isArray(originalFeatureStyle)) styles.push(...originalFeatureStyle);
+            else styles.push(originalFeatureStyle);
+          } else if (layerStyleFn) {
+            const layerStyles = layerStyleFn(feature, resolution);
+            if (Array.isArray(layerStyles)) styles.push(...layerStyles);
+            else if (layerStyles) styles.push(layerStyles);
+          }
+
+          styles.push(linkedFacilityHighlightStyle);
+          return styles;
+        });
+        targetFeature.changed?.();
+        return;
+      }
+    }
+  };
+
   // 피쳐데이터의 현재 레이어 이름 가져오는 함수
   const getSelectedLayers = () => {
     let result = null;
@@ -348,6 +439,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     fetchData();
   }, [featureId, processedData]);
 
+  useEffect(() => {
+    const layerTypeNm = featureData?.values_
+      ? featureData?.id_?.split('.')?.[0]
+      : featureData?.lyrTypeNm;
+
+    if (layerTypeNm === 'tb_ms_swage_prcs_zone') {
+      const facilityCode = featureData?.values_?.swtrmt_fclt_cd ?? featureData?.swtrmtFcltCd;
+      highlightLinkedFacility(facilityCode);
+      return () => {
+        clearLinkedFacilityHighlight();
+      };
+    }
+
+    clearLinkedFacilityHighlight();
+
+    return () => {
+      clearLinkedFacilityHighlight();
+    };
+  }, [featureData, gisMap]);
+
   // 저장 시 모달 띄우기
   const handleSaveClick = () => {
     setIsModalOpen(true); // 모달 열기

apps/sn/app/(map-layout)/map/page.tsx

@@ -171,6 +171,10 @@ const Map = () => {
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
           checkInterval={2500}
+          showZoomLevel={true}
+
+          defaultZoom={7.5}
+          defaultLonLat={[127.75, 36]}
         />
       </div>
     </>

apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx

@@ -249,7 +249,7 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
           <LoadingOverlay isLoading={isLoading} />
           <UiTable
             headName={(() => {
-              return (<>조회 결과 ({tableCount.toLocaleString('ko-KR')})건</>);
+              return (<>조회 결과</>);
             })()
             }
             tableData={tableData}

apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx

@@ -130,7 +130,7 @@ const SearchModal: React.FC = () => {
             <UiTable className='w-[120%]'
               headName={(() => {
                 const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
-                return (<>{label} 조회 결과 ({tableCount.toLocaleString('ko-KR')})건</>);
+                return (<>{label} 조회 결과</>);
               })()
               }
               tableData={tableData}
@@ -161,7 +161,7 @@ const SearchModal: React.FC = () => {
               headName={
                 (() => {
                   const label = WORK_TYPES.find((type) => type.val === workType)?.text
-                  return (<>{label} 사업 현황 ({tableCount.toLocaleString('ko-KR')})건</>);
+                  return (<>{label} 사업 현황</>);
                 })()
               }
               tableData={tableData}
@@ -188,7 +188,7 @@ const SearchModal: React.FC = () => {
               headName={
                 (() => {
                   const label = WORK_TYPES.find((type) => type.val === workType)?.text
-                  return (<>{label} 결과표 ({detailTableCount.toLocaleString('ko-KR')})건</>);
+                  return (<>{label} 결과표</>);
                 })()
               }
               tableData={detailTableData}

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 {

apps/sn/package.json

@@ -48,7 +48,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/sn/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,23 +1,26 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { useUserStore } from "@/shared/lib";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
+import { isAtLoginRedirectUrl } from "@common/network";
 import { getCookie } from "@/shared/lib";
-import { LoginApi } from "../api/login-service";
 
-
-const LOGIN_PAGE_URL = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "http://dev.onasys.co.kr:3000/auth/login"; // 로그인 페이지 URL
+const LOGIN_PAGE_URL =
+  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
   const pathname = usePathname();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -35,24 +38,27 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
         setUserInfo(null);
 
-          const hostname = window.location.hostname;
+        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
 
-          // 개발 환경에서는 localhost 도메인 사용
-          if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr")
-            window.location.href = "/";
+        // const hostname = window.location.hostname;
 
-          // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-          // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-          if (hostname.includes("hasuon.or.kr")) window.location.href = LOGIN_PAGE_URL; // 세션 만료 시 CM 로그인 페이지로 리다이렉트
-        }
+        // // 개발 환경에서는 localhost 도메인 사용
+        // if (
+        //   hostname === "localhost" ||
+        //   hostname === "127.0.0.1" ||
+        //   hostname === "con.mind-one.co.kr"
+        // )
+        //   window.location.href = "/";
+
+        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
+        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
+        // if (hostname.includes("hasuon.or.kr"))
+        //   window.location.href = LOGIN_PAGE_URL; // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+
+        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
+        window.location.assign(LOGIN_PAGE_URL);
       }
     })();
   }, [pathname]);

apps/st/.gitignore

@@ -40,3 +40,6 @@ next-env.d.ts
 .env*
 !.env.example
 *.md
+
+# next-agents-md
+.next-docs/

apps/st/app/(auth)/auth/layout.tsx

@@ -0,0 +1,17 @@
+import "@/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}

apps/st/app/(main)/(with-base-layout)/layout.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useCallback, useEffect, useMemo } from "react";
+import { usePathname } from "next/navigation";
+
+import {
+    getTabStoreState as getGridTabStoreState,
+    useTabStore as gridTabStore,
+} from "@rsone/components";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { getCookie, useAlertStore, useMenuStore } from "@/shared/lib";
+import { StatisticsPageLayout } from "@/shared/ui/statistics-page-layout";
+import { MenuApi } from "@/entities/menu";
+import type { MenuItem } from "@/entities/menu";
+import { BaseLayout } from "@common/components";
+import { getConfig } from "@common/config";
+
+import { getTabStoreState, useTabStore } from "@/store/tab-store";
+
+const appConfig = getConfig();
+const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
+const appSiteId = getCookie("site-id-key") ?? "";
+const isLoggedIn = !!userId;
+
+export default function WithBaseLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const pathname = usePathname();
+    const queryClient = useQueryClient();
+
+    const setCurrentMenuInfo = useMenuStore(
+        (state) => state.setCurrentMenuInfo,
+    );
+    const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
+
+    const addTab = useTabStore((state) => state.addTab);
+    const setActiveTab = useTabStore((state) => state.setActiveTab);
+    const setMenuList = useTabStore((state) => state.setMenuList);
+    const activeTabId = useTabStore((state) => state.activeTabId);
+    const menuList = useTabStore((state) => state.menuList);
+    const tabs = useTabStore((state) => state.tabs);
+    const addTabForGrid = gridTabStore((state) => state.addTab);
+    const setActiveTabForGrid = gridTabStore((state) => state.setActiveTab);
+    const setMenuListForGrid = gridTabStore((state) => state.setMenuList);
+    const alert = useAlertStore((state) => state.setMessage);
+
+    const { data: menuListData } = useQuery({
+        queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
+        queryFn: () => MenuApi.getMenuRoles(appSiteId),
+        enabled: isLoggedIn,
+    });
+
+    useEffect(() => {
+        if (menuListData) {
+            setMenuList(menuListData);
+            setMenuListForGrid(menuListData);
+        }
+    }, [menuListData, setMenuList, setMenuListForGrid]);
+
+    // 새로고침 후 persist로 앱 탭만 복원된 경우 rsone 그리드 스토어에 탭을 맞춤
+    useEffect(() => {
+        if (!menuList) return;
+        const appTabs = getTabStoreState().tabs;
+        if (appTabs.length === 0) return;
+        if (getGridTabStoreState().tabs.length > 0) return;
+
+        for (const tab of appTabs) {
+            getGridTabStoreState().addTab(tab.menuItem);
+        }
+
+        const activeId = getTabStoreState().activeTabId;
+        if (activeId) {
+            const activeTab = appTabs.find((t) => t.id === activeId);
+            const gridActiveId = activeTab?.menuItem.menuEngNm;
+            if (gridActiveId) {
+                getGridTabStoreState().setActiveTab(gridActiveId);
+            }
+        }
+    }, [menuList, tabs]);
+
+    useEffect(() => {
+        if (!pathname) return;
+
+        // pathname이 변경될 때만 실행되도록 tabs를 직접 가져옴
+        const currentTabs = getTabStoreState().tabs;
+        const tab = currentTabs.find((t) => t.path === pathname);
+        if (tab) {
+            setActiveTab(tab.id);
+            const gridActiveId = tab.menuItem.menuEngNm;
+            if (gridActiveId) {
+                setActiveTabForGrid(gridActiveId);
+            }
+        }
+    }, [pathname, setActiveTab, setActiveTabForGrid]);
+
+    // 활성 탭의 메뉴를 찾아서 urlPath를 가져옴. 탭이 전부 닫히면 ''를 넘겨 LNB에서 메뉴 강조 제거
+    const currentPath = useMemo(() => {
+        if (tabs.length === 0) return "";
+
+        if (activeTabId && menuList) {
+            // menuList에서 활성 탭의 메뉴 찾기
+            const findMenuByEngNm = (items: MenuItem[]): MenuItem | null => {
+                for (const item of items) {
+                    if (item.urlPath === activeTabId) {
+                        return item;
+                    }
+                    if (item.children) {
+                        const found = findMenuByEngNm(item.children);
+                        if (found) return found;
+                    }
+                }
+                return null;
+            };
+
+            const activeMenu = findMenuByEngNm(menuList);
+
+            if (activeMenu?.urlPath) {
+                return activeMenu.urlPath;
+            }
+        }
+
+        // 탭에서 직접 찾기
+        if (activeTabId) {
+            const currentTabs = getTabStoreState().tabs;
+            const activeTab = currentTabs.find((t) => t.id === activeTabId);
+            if (activeTab?.menuItem?.urlPath) {
+                return activeTab.menuItem.urlPath;
+            }
+        }
+
+        // currentMenuInfo에서 가져오기
+        if (currentMenuInfo?.urlPath) {
+            return currentMenuInfo.urlPath;
+        }
+
+        // 기본값으로 pathname 사용
+        return pathname ?? "";
+    }, [tabs.length, activeTabId, menuList, currentMenuInfo, pathname]);
+
+    const handleMenuClick = useCallback(
+        (item: MenuItem) => {
+            setCurrentMenuInfo(item);
+            const addTabResult: boolean = addTab(item);
+
+            // packages/rsone의 스토어에도 동기화
+            if (addTabResult) {
+                addTabForGrid(item);
+            }
+
+            if (!addTabResult) {
+                alert(`최대 추가 할 수 있는 화면 수를 초과 하였습니다.
+            기존 화면을 닫은 후 이용해주세요.`);
+            }
+        },
+        [setCurrentMenuInfo, addTab, addTabForGrid, alert],
+    );
+
+    return (
+        <BaseLayout
+            queryClient={queryClient}
+            currentPath={currentPath}
+            handleMenuClick={handleMenuClick}
+        >
+            <StatisticsPageLayout>{children}</StatisticsPageLayout>
+        </BaseLayout>
+    );
+}

apps/st/app/(main)/(with-base-layout)/statistics/page.tsx

@@ -1,3 +1,2 @@
 import { StatisticsPage } from "@/pages/statistics";
-
 export default StatisticsPage;

apps/st/app/(with-base-layout)/layout.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import { useEffect, useCallback, useMemo } from "react";
-import { usePathname } from "next/navigation";
-import { useQueryClient, useQuery } from "@tanstack/react-query";
-
-import type { MenuItem } from "@/entities/menu";
-import { useMenuStore, useAlertStore } from "@/shared/lib";
-import { useTabStore, getTabStoreState } from "@/store/tab-store";
-import { useTabStore as gridTabStore } from "@rsone/components";
-import { getConfig } from "@common/config";
-import { getCookie } from "@/shared/lib";
-import { getMenuList } from "../../../../packages/common/components/src/api";
-import { ENDPOINT } from "@/shared/config";
-
-import { BaseLayout } from "@common/components";
-import { StatisticsPageLayout } from "@/shared/ui/statistics-page-layout";
-
-const appConfig = getConfig();
-const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
-const appSiteId = getCookie("site-id-key") ?? "";
-const isLoggedIn = !!userId;
-
-export default function WithBaseLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const pathname = usePathname();
-  const queryClient = useQueryClient();
-
-  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
-  const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
-
-  const addTab = useTabStore((state) => state.addTab);
-  const setActiveTab = useTabStore((state) => state.setActiveTab);
-  const setMenuList = useTabStore((state) => state.setMenuList);
-  const activeTabId = useTabStore((state) => state.activeTabId);
-  const menuList = useTabStore((state) => state.menuList);
-  const tabs = useTabStore((state) => state.tabs);
-  const addTabForGrid = gridTabStore((state) => state.addTab);
-  const setActiveTabForGrid = gridTabStore((state) => state.setActiveTab);
-  const setMenuListForGrid = gridTabStore((state) => state.setMenuList);
-  const alert = useAlertStore((state) => state.setMessage);
-
-  const { data: menuListData } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
-    queryFn: () => getMenuList(appSiteId),
-    enabled: isLoggedIn,
-  });
-
-  useEffect(() => {
-    if (menuListData) {
-      setMenuList(menuListData);
-      setMenuListForGrid(menuListData);
-    }
-  }, [menuListData, setMenuList, setMenuListForGrid]);
-
-  useEffect(() => {
-    if (!pathname) return;
-
-    // pathname이 변경될 때만 실행되도록 tabs를 직접 가져옴
-    const currentTabs = getTabStoreState().tabs;
-    const tab = currentTabs.find((t) => t.path === pathname);
-    if (tab) {
-      setActiveTab(tab.id);
-      setActiveTabForGrid(tab.id);
-    }
-  }, [pathname, setActiveTab, setActiveTabForGrid]);
-
-  // 활성 탭의 메뉴를 찾아서 urlPath를 가져옴. 탭이 전부 닫히면 ''를 넘겨 LNB에서 메뉴 강조 제거
-  const currentPath = useMemo(() => {
-    if (tabs.length === 0) return "";
-
-    if (activeTabId && menuList) {
-      // menuList에서 활성 탭의 메뉴 찾기
-      const findMenuByEngNm = (items: MenuItem[]): MenuItem | null => {
-        for (const item of items) {
-          if (item.menuEngNm === activeTabId) {
-            return item;
-          }
-          if (item.children) {
-            const found = findMenuByEngNm(item.children);
-            if (found) return found;
-          }
-        }
-        return null;
-      };
-
-      const activeMenu = findMenuByEngNm(menuList);
-
-      if (activeMenu?.urlPath) {
-        return activeMenu.urlPath;
-      }
-    }
-
-    // 탭에서 직접 찾기
-    if (activeTabId) {
-      const currentTabs = getTabStoreState().tabs;
-      const activeTab = currentTabs.find((t) => t.id === activeTabId);
-      if (activeTab?.menuItem?.urlPath) {
-        return activeTab.menuItem.urlPath;
-      }
-    }
-
-    // currentMenuInfo에서 가져오기
-    if (currentMenuInfo?.urlPath) {
-      return currentMenuInfo.urlPath;
-    }
-
-    // 기본값으로 pathname 사용
-    return pathname ?? "";
-  }, [tabs.length, activeTabId, menuList, currentMenuInfo, pathname]);
-
-  const handleMenuClick = useCallback((item: MenuItem) => {
-    setCurrentMenuInfo(item);
-    const addTabResult: boolean = addTab(item);
-    
-    // packages/rsone의 스토어에도 동기화
-    if (addTabResult) {
-      addTabForGrid(item);
-    }
-
-    if (!addTabResult) {
-      alert(`최대 추가 할 수 있는 화면 수를 초과 하였습니다.
-            기존 화면을 닫은 후 이용해주세요.`);
-    }
-  }, [setCurrentMenuInfo, addTab, addTabForGrid, alert]);
-
-  return (
-    <BaseLayout
-      queryClient={queryClient}
-      currentPath={currentPath}
-      handleMenuClick={handleMenuClick}
-    >
-      <StatisticsPageLayout>{children}</StatisticsPageLayout>
-    </BaseLayout>
-  );
-}