[user service] 사용자 멀티 디바이스 로그인 처리 deviceId 추가건

.gitignore

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

.husky/pre-push

@@ -1,3 +1,10 @@
 #!/bin/sh
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$BRANCH" != "main" ]; then
+  exit 0
+fi
+echo "Branch: $BRANCH"
+echo "Changed packages (dry-run):"
+pnpm turbo run build --filter="...[origin/$BRANCH]" --dry-run
+echo "Starting build..."
 pnpm turbo run build --filter="...[origin/$BRANCH]"

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

@@ -145,11 +145,11 @@ function LoginPage() {
         <div className="left_box fx">
           <div className="text">
             <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/cs/.gitignore

@@ -38,4 +38,5 @@ yarn-error.log*
 next-env.d.ts
 
 .env*
-!.env.example
+!.env.example
+/start_cs.log

apps/cs/app/api/auth/logout/route.ts

@@ -5,6 +5,7 @@ import {
   AUTH_USER_ID,
   CLAIM_NAME,
   REFRESH_TOKEN,
+  DEVICE_ID,
 } from "@/shared/config";
 
 export async function POST() {
@@ -13,5 +14,6 @@ export async function POST() {
   cookieStore.delete(REFRESH_TOKEN);
   cookieStore.delete(AUTH_USER_ID);
   cookieStore.delete(CLAIM_NAME);
+  cookieStore.delete(DEVICE_ID); // 로그아웃 시 deviceId 함께 삭제 → 재로그인 시 새 세션 생성
   return NextResponse.json({ message: "Logged out" }, { status: 200 });
 }

apps/cs/app/api/proxy/[...url]/route.ts

@@ -5,6 +5,7 @@ import {
   REFRESH_TOKEN,
   SERVER_API_URL,
   SITE_ID,
+  DEVICE_ID,
 } from "@/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
@@ -20,9 +21,16 @@ async function handler(
     "X-Site-Id": SITE_ID,
   };
   let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
 
-  // silent refresh
+  const isRefreshHandler = params.url.includes("refresh");
+  const isLoginHandler = params.url.includes("login");
+
+  // ── Silent Refresh ──────────────────────────────────────────────────────────
+  // HttpOnly 쿠키에서 refresh-token 꺼내 Authorization 헤더에 주입.
+  // 쿠키에 저장된 device-id도 X-Device-Id 헤더로 함께 전달한다.
+  // 백엔드: TokenProvider.refreshToken(token, request, response)
+  //   → userService.findByRefreshToken(refreshToken, deviceId)   (Redis Hash 검증)
+  //   → userService.updateRefreshToken(userUnqId, newToken, deviceId) (RTR 갱신)
   if (isRefreshHandler) {
     const refreshToken = cookieStore.get(REFRESH_TOKEN);
     headers[CLAIM_NAME] = refreshToken?.value ?? "";
@@ -30,6 +38,27 @@ async function handler(
     if (!headers[CLAIM_NAME]) {
       return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
     }
+
+    // device-id 쿠키 → X-Device-Id 헤더 (Redis 다중 세션 식별)
+    const deviceId = cookieStore.get(DEVICE_ID);
+    if (deviceId?.value) {
+      headers["X-Device-Id"] = deviceId.value;
+    }
+  }
+
+  // ── Login ────────────────────────────────────────────────────────────────────
+  // 클라이언트(login-service.ts)가 fetch 헤더에 X-Device-Id 를 포함해서 전송한다.
+  // BFF는 해당 헤더를 그대로 백엔드로 포워딩한다.
+  // 백엔드: AuthenticationFilter.successfulAuthentication
+  //   → TokenProvider.createTokenAndAddHeader(request, ...)
+  //   → request.getHeader("X-Device-Id") 로 deviceId 추출
+  //   → userService.updateRefreshToken(userUnqId, refreshToken, deviceId)
+  //   → Redis Hash[user:sessions:{userUnqId}][deviceId] = refreshToken (TTL 1일)
+  if (isLoginHandler) {
+    const deviceId = request.headers.get("X-Device-Id");
+    if (deviceId) {
+      headers["X-Device-Id"] = deviceId;
+    }
   }
 
   try {
@@ -62,16 +91,28 @@ async function handler(
 
       const forwardedHost = request.headers.get("x-forwarded-host");
       const host = request.headers.get("host");
-      const actualHost = forwardedHost || host || new URL(request.url).hostname.toString();
-      
-      // 운영 환경에서 domain 설정
-      const domain = actualHost.includes("hasuon.or.kr") ? ".hasuon.or.kr" : actualHost;
+      const rawHost =
+        forwardedHost || host || new URL(request.url).hostname.toString();
+
+      // 포트 번호 제거 (예: "localhost:3000" → "localhost")
+      const hostname = rawHost.split(":")[0];
+
+      // 쿠키 domain 결정
+      // - localhost / 127.0.0.1: domain 미지정 (undefined) → 브라우저 기본 동작
+      // - 운영(hasuon.or.kr): 서브도메인 공유를 위해 최상위 도메인 앞에 점(.) 붙임
+      // - 그 외(IP, 기타 도메인): 현재 hostname 그대로 사용
+      const isLocal = hostname === "localhost" || hostname === "127.0.0.1";
+      const domain = isLocal
+        ? undefined
+        : hostname.includes("hasuon.or.kr")
+          ? ".hasuon.or.kr"
+          : hostname;
 
       if (refreshToken) {
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "strict",
-          domain: domain,
+          ...(domain !== undefined && { domain }),
           path: "/",
         });
       }
@@ -91,7 +132,6 @@ async function handler(
   }
 }
 
-
 export async function POST(
   request: Request,
   props: { params: Promise<{ url: string[] }> },

apps/cs/src/entities/auth/api/login-service.ts

@@ -5,6 +5,7 @@ import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  DEVICE_ID,
 } from "@/shared/config";
 import type { LoginService, ILogin } from "../model/login-interface";
 import { tokenManager } from "../lib/token-manager";
@@ -23,8 +24,21 @@ export class LoginApiService implements LoginService {
 
   public async login(payload: ILogin): Promise<void> {
     try {
+      // ✅ 로그인 요청 전에 deviceId 생성/결정
+      // - 같은 브라우저 재로그인 시: 기존 쿠키 재사용 → 동일 Redis 슬롯 유지
+      // - 최초 로그인 / 로그아웃 후 재로그인 시: 새 UUID 생성 → 새 Redis 슬롯
+      const existingDeviceId = tokenManager.getDeviceId();
+      const deviceId = existingDeviceId ?? crypto.randomUUID();
+
       const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
         method: "POST",
+        headers: {
+          // ✅ 로그인 요청 헤더에 X-Device-Id 포함
+          // BFF route.ts → 백엔드 AuthenticationFilter → TokenProvider.createTokenAndAddHeader()
+          // → userService.updateRefreshToken(userUnqId, refreshToken, deviceId)
+          // → Redis Hash[user:sessions:{userUnqId}][deviceId] = refreshToken (TTL 1일)
+          "X-Device-Id": deviceId,
+        },
         body: JSON.stringify({
           userId: payload.userId,
           password: payload.password,
@@ -32,24 +46,27 @@ export class LoginApiService implements LoginService {
       });
 
       const data = await response.json();
-      console.log('data ', data)
+      console.log("data ", data);
       const accessToken = data[ACCESS_TOKEN];
       const tokenId = data[AUTH_USER_ID];
 
       if (!accessToken || !tokenId) {
-        if (data.message == 'Invalid Credentials' ) {
-          throw new Error('아이디와 비밀번호가 일치하지 않습니다.');
-        } else if (data.message == 'User not found') {
-          throw new Error('존재하지 않는 아이디입니다.');
-        } else if (data.message == 'User is not active') {
-          throw new Error('활성화되지 않은 계정입니다.');
-        } else if (data.message == 'User is not verified') {
-          throw new Error('이메일 인증이 필요합니다.');
+        if (data.message == "Invalid Credentials") {
+          throw new Error("아이디와 비밀번호가 일치하지 않습니다.");
+        } else if (data.message == "User not found") {
+          throw new Error("존재하지 않는 아이디입니다.");
+        } else if (data.message == "User is not active") {
+          throw new Error("활성화되지 않은 계정입니다.");
+        } else if (data.message == "User is not verified") {
+          throw new Error("이메일 인증이 필요합니다.");
         } else {
           throw new Error(data.message);
-        } 
+        }
       }
 
+      // ✅ 로그인 성공 후 deviceId 쿠키 저장 (maxAge=86400, Refresh Token TTL과 동기화)
+      tokenManager.setDeviceId(deviceId);
+
       tokenManager.setToken(CLAIM_NAME, accessToken);
       tokenManager.setToken(AUTH_USER_ID, tokenId);
       tokenManager.setupRefreshTimer(
@@ -66,6 +83,10 @@ export class LoginApiService implements LoginService {
 
   public async silentRefresh(): Promise<void> {
     try {
+      // deviceId는 BFF(route.ts)가 쿠키(device-id)에서 읽어 X-Device-Id 헤더로 자동 전달
+      // → 백엔드 TokenProvider.refreshToken(token, request, response)
+      // → userService.findByRefreshToken(refreshToken, deviceId) → Redis Hash 검증
+      // → userService.updateRefreshToken(userUnqId, newRefreshToken, deviceId) → RTR 갱신
       const response = await fetch(
         `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
         { method: "PUT" },

apps/cs/src/entities/auth/lib/token-manager.ts

@@ -1,4 +1,4 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { AUTH_USER_ID, CLAIM_NAME, DEVICE_ID } from "@/shared/config";
 import { getCookie, setCookie, removeCookie } from "@/shared/lib";
 
 export class TokenManager {
@@ -20,22 +20,18 @@ export class TokenManager {
 
   public setToken(key: string, value: string): void {
     const domain = this.getCookieDomain();
-    
     setCookie(key, value, {
       secure: window.location.protocol === "https:",
       sameSite: "lax",
       domain: domain,
-      path: "/", // 모든 경로에서 접근 가능
+      path: "/",
     });
   }
 
-  
   private getCookieDomain(): string | undefined {
     const hostname = window.location.hostname;
-    
-    // 개발 환경에서는 localhost 도메인 사용
     if (hostname === "localhost" || hostname === "127.0.0.1") {
-      return undefined; // localhost에서는 도메인 설정하지 않음
+      return undefined;
     }
     
     // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
@@ -52,6 +48,33 @@ export class TokenManager {
     removeCookie(key, { domain, path: "/" });
   }
 
+  /**
+   * deviceId 쿠키 저장
+   * - httpOnly가 아닌 일반 쿠키로 저장 (BFF route.ts에서 cookieStore.get()으로 읽기 위함)
+   * - js-cookie는 maxAge를 지원하지 않으므로 expires(Date)로 변환하여 사용
+   * - expires: Refresh Token TTL(1일)과 동일하게 설정하여 브라우저 재시작 후에도 동일 Redis 슬롯 재사용
+   */
+  public setDeviceId(deviceId: string): void {
+    const domain = this.getCookieDomain();
+    // js-cookie v3는 maxAge 속성을 지원하지 않음 (number 타입에 .split() 호출로 TypeError 발생)
+    // maxAge(초) → expires(Date) 변환: 1일 = 86400초
+    const expires = new Date(Date.now() + 86400 * 1000);
+    setCookie(DEVICE_ID, deviceId, {
+      secure: window.location.protocol === "https:",
+      sameSite: "lax",
+      domain: domain,
+      path: "/",
+      expires, // Date 객체로 전달 (js-cookie가 toUTCString()으로 직렬화)
+    });
+  }
+
+  /**
+   * deviceId 쿠키 조회
+   */
+  public getDeviceId(): string | undefined {
+    return getCookie(DEVICE_ID);
+  }
+
   public setupRefreshTimer(
     callback: () => Promise<void>,
     expirationTime: number,
@@ -59,7 +82,6 @@ export class TokenManager {
     if (this.refreshTimer) {
       clearTimeout(this.refreshTimer);
     }
-
     this.refreshTimer = setTimeout(() => {
       callback().catch((error) => {
         console.error("Silent refresh failed:", error);
@@ -73,9 +95,9 @@ export class TokenManager {
       clearTimeout(this.refreshTimer);
       this.refreshTimer = null;
     }
-
     this.removeToken(CLAIM_NAME);
     this.removeToken(AUTH_USER_ID);
+    this.removeToken(DEVICE_ID); // deviceId 함께 삭제
   }
 }
 

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

@@ -9,3 +9,4 @@ export const ACCESS_TOKEN =
 export const REFRESH_TOKEN =
   process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
+export const DEVICE_ID = process.env.NEXT_PUBLIC_DEVICE_ID || "device-id";

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_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,10 +460,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="이전"
           >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -480,10 +483,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="다음"
           >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
                             className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
                           >
                             <div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
-                              <img
+                              <Image
                                 src={c.imageSrc}
                                 alt={c.title}
+                                width={640}
+                                height={241}
                                 className="h-full w-full object-cover"
+                                style={{ width: "100%", height: "100%" }}
                                 loading="lazy"
                               />
                             </div>

apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx

@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
 "use client";
 
+import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 type Slide = { src: string; alt?: string };
@@ -86,10 +87,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
             >
               {safeSlides.map((s, i) => (
                 <div key={`${s.src}-${i}`} className="min-w-full">
-                  <img
+                  <Image
                     src={s.src}
                     alt={s.alt ?? `slide-${i + 1}`}
+                    width={583}
+                    height={400}
                     className="w-full h-full object-contain"
+                    style={{ width: "100%", height: "100%" }}
                     draggable={false}
                   />
                 </div>

apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx

@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/Lnb.tsx
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -29,7 +30,15 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
   const [openLabel, setOpenLabel] = useState<string | null>(defaultOpenLabel);
 
   return (
-    <aside className="w-[260px] min-w-[260px] shrink-0">
+    <aside
+        className={[
+        "fixed left-0 top-[83px]",                 // ✅ 화면 고정 + TopNav 아래로
+        "w-[260px] min-w-[260px] shrink-0",
+        "h-[calc(100vh-83px)]",                    // ✅ 남은 높이만큼
+        "overflow-y-auto",                         // ✅ LNB 내부 스크롤
+        "bg-white z-50",                           // ✅ 겹침 방지
+        ].join(" ")}
+    >
       {/* 타이틀 */}
       <div
         className="h-[120px] flex items-center justify-center
@@ -81,10 +90,12 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
                         isOpen ? "rotate-180" : "rotate-0",
                     ].join(" ")}
                     >
-                    <img
-                        src="/images/landing/drop_arrow.svg"
-                        alt="드롭다운 화살표 아이콘"
-                        className="w-7 h-7"
+                    <Image
+                      src="/images/landing/drop_arrow.svg"
+                      alt="드롭다운 화살표 아이콘"
+                      width={28}
+                      height={28}
+                      className="w-7 h-7"
                     />
                   </span>
                 </button>

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>
@@ -62,4 +66,4 @@ export default function Cases() {
       </div>
     </section>
   );
-}
+}

apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx

@@ -1,4 +1,5 @@
 // apps/dm/app/(landing)/reuse/_sections/Hero.tsx
+import Image from "next/image";
 import styles from "../reuse.module.css";
 
 export default function Hero() {
@@ -21,9 +22,15 @@ export default function Hero() {
         </div>
       </div>
       <div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
-        <img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
+        <Image
+          src="/images/landing/scroll_down.svg"
+          alt=""
+          width={26}
+          height={40}
+          className="w-[26px] h-[40px]"
+        />
         <span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
       </div>
     </section>
   );
-}
+}

apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx

@@ -1,12 +1,17 @@
 // apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
+import card01 from "@/public/images/landing/card_01.jpg";
+import card02 from "@/public/images/landing/card_02.jpg";
+import card03 from "@/public/images/landing/card_03.jpg";
+import card04 from "@/public/images/landing/card_04.jpg";
 
 type IntroCardItem = {
   title: string;
   desc: string;
-  image: string;
+  image: StaticImageData;
   href: string;
 };
 
@@ -14,25 +19,25 @@ const INTRO_CARDS: IntroCardItem[] = [
   {
     title: "물 재이용 법",
     desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
-    image: "/images/landing/card_01.jpg",
+    image: card01,
     href: "/reuse/intro/law",
   },
   {
     title: "친환경 수자원 빗물",
     desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
-    image: "/images/landing/card_02.jpg",
+    image: card02,
     href: "/reuse/intro/rain",
   },
   {
     title: "알뜰하게 재이용되는 중수",
     desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
-    image: "/images/landing/card_03.jpg",
+    image: card03,
     href: "/reuse/intro/greywater",
   },
   {
     title: "하수처리수 재이용",
     desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
-    image: "/images/landing/card_04.jpg",
+    image: card04,
     href: "/reuse/intro/treated",
   },
 ];
@@ -61,10 +66,12 @@ export default function IntroCards() {
                     className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
                 >
                     {/* 배경 이미지 (이미 그라디언트 포함) */}
-                    <img
-                    src={card.image}
-                    alt={card.title}
-                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+                    <Image
+                      src={card.image}
+                      alt={card.title}
+                      fill
+                      sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
+                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                     />
 
                     {/* 텍스트 영역 */}
@@ -83,4 +90,4 @@ export default function IntroCards() {
       </div>
     </section>
   );
-}
+}

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,264 +185,455 @@ export default function DemandRegisterPage() {
   const [cand2, setCand2] = useState("");
   const [cand3, setCand3] = useState("");
 
+  // 샘플 데이터
+  const similarRows: SimilarCaseRow[] = [
+  // ---------------- A (2행) ----------------
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO폐수재이용",
+    supplyCapacity: 50,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+  // A의 공급처 row 추가(=표 1행 추가) → 나머지 컬럼도 같이 채움
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO스포츠센터",
+    supplyCapacity: 30,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+
+  // ---------------- B (2행) ----------------
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설",
+    supplyCapacity: 70000,
+
+    demandName: "OO천",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 3,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 2300,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+  // B의 공급처 row 추가(=표 1행 추가)
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설(2라인)",
+    supplyCapacity: 70000,
+
+    demandName: "OO저수지",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 5,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 7700,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+
+  // ---------------- C (1행) ----------------
+  {
+    caseId: "C",
+    projectName: "OO 산업단지 공업용수 재이용사업",
+    period: "2021.03~2024.12",
+    supplyFacilityType: "하수",
+    supplyName: "OO공공하수처리장",
+    supplyCapacity: 15000,
+
+    demandName: "OO산업단지",
+    demandAddress: "OO시 산업로 25",
+
+    facilityCapacity: 5000,
+    pipeKm: 4,
+    purpose: "공업용수",
+    supplyAmt: 5000,
+    treatment: "UF + RO",
+    usePurpose: "공업용수",
+  },
+
+  // ---------------- D (1행) ----------------
+  {
+    caseId: "D",
+    projectName: "OO 공원 조경용수 재이용사업",
+    period: "2018.05~2022.11",
+    supplyFacilityType: "중수도",
+    supplyName: "OO정수장",
+    supplyCapacity: 8000,
+
+    demandName: "OO중앙공원",
+    demandAddress: "OO시 공원로 88",
+
+    facilityCapacity: 1200,
+    pipeKm: 2,
+    purpose: "조경용수",
+    supplyAmt: 1200,
+    treatment: "모래여과",
+    usePurpose: "조경",
+  },
+];
+
+  const similarDetailsByCaseId: Record<string, SimilarCaseDetail> = {
+    A: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    B: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+    C: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    D: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+  };
+
   return (
     <>
-    
-        <main className="bg-white">
-
-            {/* 서브 타이틀 + 브레드크럼 */}
-            <SubPageHeader
-                title="수요정보등록"
-                crumbs={[
-                { label: "Home", href: "/reuse" },
-                { label: "수요신청", href: "/reuse/apply" },
-                { label: "수요정보등록" },
-                ]}
-            />
-
-            {/* 컨텐츠 영역 */}
-            <div>
-
-                {/* 기본정보 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    <FormRow label="요구시기" required>
-                        <DateInput value={reqDate} onChange={setReqDate} />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="요구수량(m²/d)" required>
-                        <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="사용용도" required>
-                        <TextInput value={usePurpose} onChange={setUsePurpose} />
-                    </FormRow>
-
-                    <Divider />
-
-                    <FormRow label="희망단가(원)" required>
-                        <TextInput value={hopePrice} onChange={setHopePrice} />
-                    </FormRow>
-                </div>
-
-                {/* 요구수질 섹션 타이틀 바 */}
-                <div className="grid grid-cols-12">
-                    <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
-                        <span className="text-lg font-semibold text-neutral-800">요구수질</span>
-                        <button
-                            type="button"
-                             onClick={() => setOpenRef(true)}
-                            className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
-                        >
-                            수질기준 참고
-                        </button>
-                        {/* 수질기준참고 모달 */}
-                        <WaterQualityRefModal
-                            open={openRef}
-                            onClose={() => setOpenRef(false)}
-                            imageSrc="/images/landing/water_quality_ref_1.png"
-                        />
-                    </div>
-                </div>
-
-                {/* 요구수질 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    {/* 1행 */}
-                    <QualityRow
-                        leftLabel="총대장균군수(개/mg)"
-                        leftRequired
-                        leftControl={
-                        <div className="flex items-center gap-4">
-                            <TextInput
-                            value={coliform}
-                            onChange={setColiform}
-                            disabled={noDetect}
-                            className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
-                            />
-                            <label className="flex items-center gap-2 text-sm text-neutral-700">
-                            <input
-                                type="checkbox"
-                                checked={noDetect}
-                                onChange={(e) => {
-                                setNoDetect(e.target.checked);
-                                if (e.target.checked) setColiform("");
-                                }}
-                                className="h-4 w-4 rounded border-neutral-300"
-                            />
-                            불검출
-                            </label>
-                        </div>
-                        }
-                        rightLabel="총질소(T-N)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 2행 */}
-                    <QualityRow
-                        leftLabel="결합잔류염소(mg/L)"
-                        leftRequired
-                        leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
-                        rightLabel="총인(T-P)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 3행 */}
-                    <QualityRow
-                        leftLabel="탁도(NTU)"
-                        leftRequired
-                        leftControl={
-                        <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
-                        }
-                        rightLabel="수소이온농도(pH)"
-                        rightControl={
-                        <div className="flex items-center gap-2">
-                            <TextInput
-                            value={ph.min}
-                            onChange={(v) => setPh((p) => ({ ...p, min: v }))}
-                            className="w-32"
-                            />
-                            <span className="text-neutral-500">~</span>
-                            <TextInput
-                            value={ph.max}
-                            onChange={(v) => setPh((p) => ({ ...p, max: v }))}
-                            className="w-32"
-                            />
-                        </div>
-                        }
-                    />
-                    <Divider />
-
-                    {/* 4행 */}
-                    <QualityRow
-                        leftLabel={
-                        <>
-                            생물화학적산소요구량
-                            <br />
-                            (BOD)(mg/L)
-                        </>
-                        }
-                        leftRequired
-                        leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
-                        rightLabel="염화물(mgCL/L)"
-                        rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
-                    />
-                    <Divider />
-
-                    {/* 5행 */}
-                    <QualityRow
-                        leftLabel="냄새"
-                        leftRequired
-                        leftControl={
-                        <select
-                            value={odor}
-                            onChange={(e) => setOdor(e.target.value)}
-                            className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
-                        >
-                            <option>불쾌하지 않을 것</option>
-                            <option>약간 있음</option>
-                            <option>있음</option>
-                        </select>
-                        }
-                        rightLabel="전기전도도(µs/cm)"
-                        rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
-                    />
-                    <Divider />
-
-                    {/* 6행 */}
-                    <QualityRow
-                        leftLabel="색도(도)"
-                        leftRequired
-                        leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
-                        rightLabel="비고"
-                        rightControl={
-                        <textarea
-                            value={remark}
-                            onChange={(e) => setRemark(e.target.value)}
-                            className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
-                        />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 후보지 선택 */}
-                    <div className="grid grid-cols-12">
-                        <LabelCell>
-                        공급처 후보지 선택
-                        <br />
-                        (필수아님)
-                        </LabelCell>
-
-                        <div className="col-span-12 md:col-span-10 p-6">
-                            <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
-                                <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
-                                <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
-                                <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
-
-                                <div className="flex items-center gap-3 xl:ml-2">
-                                <button
-                                    type="button"
-                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
-                                    onClick={() => setOpenCand(true)}
-                                >
-                                    후보지 조회
-                                </button>
-                                <button
-                                    type="button"
-                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
-                                    onClick={() => {
-                                    // TODO: 유사사례 연결
-                                    console.log("유사사례");
-                                    }}
-                                >
-                                    유사사례
-                                </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* 하단 버튼 */}
-                <div className="flex justify-center py-12">
-                    <button
-                        type="button"
-                        className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
-                        onClick={() => {
-                        // TODO: 저장 처리
-                        console.log("수요정보 등록");
-                        }}
-                    >
-                        수요정보 등록
-                    </button>
-                </div>
-
-            </div>
-        </main>
-
-        <CandidateSiteModal
-            open={openCand}
-            onClose={() => setOpenCand(false)}
-            initialSelected={selectedCands}
-            onApply={(list) => {
-                setSelectedCands(list);
-
-                // ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
-                setCand1(list[0]?.name ?? "");
-                setCand2(list[1]?.name ?? "");
-                setCand3(list[2]?.name ?? "");
-
-                setOpenCand(false);
-            }}
+      <main className="bg-white">
+        <SubPageHeader
+          title="수요정보등록"
+          crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "수요신청", href: "/reuse/apply" },
+            { label: "수요정보등록" },
+          ]}
         />
+
+        <div>
+          <div className="border border-neutral-200 bg-white">
+            <FormRow label="요구시기" required>
+              <DateInput value={reqDate} onChange={setReqDate} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="요구수량(m²/d)" required>
+              <TextInput value={reqQty} onChange={setReqQty} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="사용용도" required>
+              <TextInput value={usePurpose} onChange={setUsePurpose} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="희망단가(원)" required>
+              <TextInput value={hopePrice} onChange={setHopePrice} />
+            </FormRow>
+          </div>
+
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 lg:col-span-2 inline-flex items-center justify-center gap-3 px-6 py-6 text-center">
+              <span className="text-lg font-semibold text-neutral-800">요구수질</span>
+              <button
+                type="button"
+                onClick={() => setOpenRef(true)}
+                className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
+              >
+                수질기준 참고
+              </button>
+
+              <WaterQualityRefModal
+                open={openRef}
+                onClose={() => setOpenRef(false)}
+                imageSrc="/images/landing/water_quality_ref_1.png"
+              />
+            </div>
+          </div>
+
+          <div className="border border-neutral-200 bg-white">
+            <QualityRow
+              leftLabel="총대장균군수(개/mg)"
+              leftRequired
+              leftControl={
+                <div className="flex items-center gap-4">
+                  <TextInput
+                    value={coliform}
+                    onChange={setColiform}
+                    disabled={noDetect}
+                    className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
+                  />
+                  <label className="flex items-center gap-2 text-sm text-neutral-700">
+                    <input
+                      type="checkbox"
+                      checked={noDetect}
+                      onChange={(e) => {
+                        setNoDetect(e.target.checked);
+                        if (e.target.checked) setColiform("");
+                      }}
+                      className="h-4 w-4 rounded border-neutral-300"
+                    />
+                    불검출
+                  </label>
+                </div>
+              }
+              rightLabel="총질소(T-N)(mg/L)"
+              rightControl={<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="결합잔류염소(mg/L)"
+              leftRequired
+              leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+              rightLabel="총인(T-P)(mg/L)"
+              rightControl={<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="탁도(NTU)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />}
+              rightLabel="수소이온농도(pH)"
+              rightControl={
+                <div className="flex items-center gap-2">
+                  <TextInput value={ph.min} onChange={(v) => setPh((p) => ({ ...p, min: v }))} className="w-32" />
+                  <span className="text-neutral-500">~</span>
+                  <TextInput value={ph.max} onChange={(v) => setPh((p) => ({ ...p, max: v }))} className="w-32" />
+                </div>
+              }
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel={
+                <>
+                  생물화학적산소요구량
+                  <br />
+                  (BOD)(mg/L)
+                </>
+              }
+              leftRequired
+              leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+              rightLabel="염화물(mgCL/L)"
+              rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="냄새"
+              leftRequired
+              leftControl={
+                <select
+                  value={odor}
+                  onChange={(e) => setOdor(e.target.value)}
+                  className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+                >
+                  <option>불쾌하지 않을 것</option>
+                  <option>약간 있음</option>
+                  <option>있음</option>
+                </select>
+              }
+              rightLabel="전기전도도(µs/cm)"
+              rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="색도(도)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
+              rightLabel="비고"
+              rightControl={
+                <textarea
+                  value={remark}
+                  onChange={(e) => setRemark(e.target.value)}
+                  className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
+                />
+              }
+            />
+            <Divider />
+
+            <div className="grid grid-cols-12">
+              <LabelCell>
+                공급처 후보지 선택
+                <br />
+                (필수아님)
+              </LabelCell>
+
+              <div className="col-span-12 md:col-span-10 p-6">
+                <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
+                  <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
+                  <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
+                  <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+
+                  <div className="flex items-center gap-3 xl:ml-2">
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenCand(true)}
+                    >
+                      후보지 조회
+                    </button>
+
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenSimilar(true)}
+                    >
+                      유사사례 조회
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-center py-12">
+            <button
+              type="button"
+              className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+              onClick={() => console.log("수요정보 등록")}
+            >
+              수요정보 등록
+            </button>
+          </div>
+        </div>
+      </main>
+
+      {/* 후보지 조회 모달 */}
+      <CandidateSiteModal
+        open={openCand}
+        onClose={() => setOpenCand(false)}
+        initialSelected={selectedCands}
+        onApply={(list) => {
+          setSelectedCands(list);
+          setCand1(list[0]?.name ?? "");
+          setCand2(list[1]?.name ?? "");
+          setCand3(list[2]?.name ?? "");
+          setOpenCand(false);
+        }}
+      />
+
+      {/* 유사사례 모달 */}
+      <SimilarCaseModal
+        open={openSimilar}
+        onClose={() => setOpenSimilar(false)}
+        rows={similarRows}
+        detailsByCaseId={similarDetailsByCaseId}
+      />
     </>
   );
 }
@@ -325,7 +652,7 @@ function LabelCell({
   required?: boolean;
 }) {
   return (
-    <div className="col-span-12 md:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+    <div className="col-span-12 md:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
       <span className="inline-flex items-center gap-1">
         {children}
         {required ? <span className="text-red-500">*</span> : null}
@@ -366,23 +693,19 @@ function QualityRow({
 }) {
   return (
     <div className="grid grid-cols-12">
-      {/* 좌측 라벨 */}
-      <div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
         <span className="inline-flex items-center gap-1">
           <span className="leading-6">{leftLabel}</span>
           {leftRequired ? <span className="text-red-500">*</span> : null}
         </span>
       </div>
 
-      {/* 좌측 입력 */}
       <div className="col-span-12 lg:col-span-4 p-6">{leftControl}</div>
 
-      {/* 우측 라벨 */}
-      <div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center  bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
         <span className="leading-6">{rightLabel}</span>
       </div>
 
-      {/* 우측 입력 */}
       <div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
     </div>
   );
@@ -441,23 +764,21 @@ function DateInput({
   value: string;
   onChange: (v: string) => void;
 }) {
-  
   const ref = useRef<HTMLInputElement | null>(null);
 
   const openPicker = () => {
     const el = ref.current;
     if (!el) return;
 
-    // Chrome/Edge 등 지원
     if (typeof (el as any).showPicker === "function") {
       (el as any).showPicker();
       return;
     }
 
-    // fallback (일부 브라우저)
     el.focus();
     el.click();
   };
+
   return (
     <div className="relative w-full max-w-[200px]">
       <input
@@ -467,7 +788,6 @@ function DateInput({
         onChange={(e) => onChange(e.target.value)}
         className={[
           "h-11 w-full rounded-md border border-neutral-300 bg-white px-3 pr-10 text-sm outline-none focus:border-neutral-500",
-          // ✅ 기본 달력 아이콘 숨김 (Tailwind arbitrary selector)
           "[&::-webkit-calendar-picker-indicator]:opacity-0",
           "[&::-webkit-calendar-picker-indicator]:absolute",
           "[&::-webkit-calendar-picker-indicator]:right-0",
@@ -477,7 +797,6 @@ function DateInput({
         ].join(" ")}
       />
 
-      {/* ✅ 클릭 가능한 아이콘 버튼 */}
       <button
         type="button"
         onClick={openPicker}
@@ -485,9 +804,15 @@ function DateInput({
         aria-label="달력 열기"
       >
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <path d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z" stroke="#1A1A1A" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+          <path
+            d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z"
+            stroke="#1A1A1A"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
         </svg>
       </button>
     </div>
   );
-}
+}

apps/dm_new/app/(landing)/reuse/apply/status/page.tsx

@@ -227,7 +227,7 @@ export default function DemandStatusPage() {
                             return (
                             <tr
                                 key={r.id}
-                                role="button"
+                                role="row"
                                 tabIndex={0}
                                 onClick={() => onSelectRow(r.id)}
                                 onKeyDown={(e) => {
@@ -278,7 +278,7 @@ export default function DemandStatusPage() {
                 상세 정보를 표시할 신청건이 없습니다.
                 </div>
             ) : (
-                <div className="mt-3 border border-neutral-200">
+              <div className="mt-3 border border-neutral-200">
                 <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
                     요구수량
                 </div>
@@ -337,8 +337,30 @@ export default function DemandStatusPage() {
                         </div>
                     </div>
                     ))}
+
+                    {/* 수요신청 진행상태 */}
+                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
+                    수요신청 진행상태
+                    </div>
+
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        진행상태
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        {selected.status}
+                        </div>
+                    </div>
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        공급처매칭결과
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        
+                        </div>
+                    </div>
                 </div>
-                </div>
+              </div>
             )}
             </section>
         </div>

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>
-    </>
+    <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,486 +25,299 @@ function DemandRegisterPageContent() {
   }, []);
 
   const [openRef, setOpenRef] = useState(false);
-  const [editMode, setEditMode] = useState(false);
-  const [updateAllowed, setUpdateAllowed] = useState(true);
-  const [dmdInfoSn, setDmdInfoSn] = useState<number>(0);
-  const [submitting, setSubmitting] = useState(false);
+
+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
 
   // 기본정보
-  const [reqDate, setReqDate] = useState<string>(today);    // 요구시기
-  const [reqQty, setReqQty] = useState<string>("");         // 요구수량(m²/d)
-  const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
-  const [hopePrice, setHopePrice] = useState<string>("");   // 희망단가
-
+  const [reqDate, setReqDate] = useState<string>(today);
+  const [reqQty, setReqQty] = useState<string>("");
+  const [usePurpose, setUsePurpose] = useState<string>("");
+  const [hopePrice, setHopePrice] = useState<string>("");
 
   // 요구수질
-  const [coliform, setColiform] = useState<string>("");       // 총대장균군수(개/mg)
-  const [noDetect, setNoDetect] = useState<boolean>(false);   // 총대장균군수 불검출
-
-  const [tn, setTn] = useState<string>("");                   // 총질소(T-N)(mg/L)
-  const [residualCl, setResidualCl] = useState<string>("");   // 결합잔류염소(mg/L)
-  const [tp, setTp] = useState<string>("");                   // 총인(T-P)(mg/L)
-  const [turbidity, setTurbidity] = useState<string>("");      // 
-  const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
-  const [bod, setBod] = useState<string>("");                  // 생물화학적산소요구량(BOD)(mg/L)
-  const [chloride, setChloride] = useState<string>("");        // 염화물(mgCL/L)
-  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");  // 냄새
-  const [ec, setEc] = useState<string>("");                    // 전기전도도(µs/cm)
-  const [color, setColor] = useState<string>("");              // 색도(도)
-  const [remark, setRemark] = useState<string>("");            // 비고
+  const [coliform, setColiform] = useState<string>("");
+  const [noDetect, setNoDetect] = useState<boolean>(false);
 
+  const [tn, setTn] = useState<string>("");
+  const [residualCl, setResidualCl] = useState<string>("");
+  const [tp, setTp] = useState<string>("");
+  const [turbidity, setTurbidity] = useState<string>("");
+  const [ph, setPh] = useState<PHRange>({ min: "", max: "" });
+  const [bod, setBod] = useState<string>("");
+  const [chloride, setChloride] = useState<string>("");
+  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");
+  const [ec, setEc] = useState<string>("");
+  const [color, setColor] = useState<string>("");
+  const [remark, setRemark] = useState<string>("");
 
   // 공급처 후보지 선택(필수아님)
   const [cand1, setCand1] = useState("");
   const [cand2, setCand2] = useState("");
   const [cand3, setCand3] = useState("");
 
-  useEffect(() => {
-    const isEditParam =
-      searchParams.get("editMode") === "true" ||
-      Boolean(searchParams.get("dmdInfoSn"));
-    setEditMode(isEditParam);
-
-    const status = (searchParams.get("status") || "").trim();
-    setUpdateAllowed(!isEditParam || status === "신청");
-
-    if (!isEditParam) return;
-
-    const parsedSn = Number(searchParams.get("dmdInfoSn") || "0");
-    setDmdInfoSn(Number.isNaN(parsedSn) ? 0 : parsedSn);
-
-    setReqDate(formatDateForInput(searchParams.get("dmndTmng")) || today);
-    setReqQty(searchParams.get("dmndQty") || "");
-    setUsePurpose(searchParams.get("useUsgCd") || "");
-    setHopePrice(searchParams.get("wntUntprc") || "");
-
-    const rawColiform = searchParams.get("grssClfg") || "";
-    const isNoDetect = rawColiform === "-1";
-    setNoDetect(isNoDetect);
-    setColiform(isNoDetect ? "" : rawColiform);
-
-    setTn(searchParams.get("tn") || "");
-    setResidualCl(searchParams.get("combResdch") || "");
-    setTp(searchParams.get("tph") || "");
-    setTurbidity(searchParams.get("trbt") || "");
-    setBod(searchParams.get("blgcOxygDmndQnt") || "");
-    setChloride(searchParams.get("clIonQnt") || "");
-    setEc(searchParams.get("cdtnv") || "");
-    setColor(searchParams.get("crmty") || "");
-    setRemark(searchParams.get("rmrk") || "");
-
-    const phRange = parsePhRange(searchParams.get("ph"));
-    setPh(phRange);
-    setOdor(searchParams.get("smll") || "불쾌하지 않을 것");
-  }, [searchParams, today]);
-
-  const validate = () => {
-    const disabledFields = Sdm.disableRules[usePurpose] || [];
-    const isDisabled = (field: string) => disabledFields.includes(field);
-
-    if (!reqDate) {
-      alert("요구시기를 입력해주세요.");
-      return false;
-    }
-    if (!reqQty.trim()) {
-      alert("요구수량을 입력해주세요.");
-      return false;
-    }
-    if (!/^\d+$/.test(reqQty.trim())) {
-      alert("요구수량은 숫자만 입력 가능합니다.");
-      return false;
-    }
-    if (!usePurpose.trim()) {
-      alert("사용용도를 입력해주세요.");
-      return false;
-    }
-    if (!hopePrice.trim()) {
-      alert("희망단가를 입력해주세요.");
-      return false;
-    }
-    if (!/^\d+$/.test(hopePrice.trim())) {
-      alert("희망단가는 숫자만 입력 가능합니다.");
-      return false;
-    }
-    if (!noDetect && coliform.trim() && !isNumeric(coliform)) {
-      alert("총대장균군수는 숫자만 입력 가능합니다.");
-      return false;
-    }
-
-    const requiredFields: Array<{ key: string; label: string; value: string }> = [
-      { key: "tn", label: "총질소(T-N)(mg/L)", value: tn },
-      { key: "combResdch", label: "결합잔류염소(mg/L)", value: residualCl },
-      { key: "tph", label: "총인(T-P)(mg/L)", value: tp },
-      { key: "trbt", label: "탁도(NTU)", value: turbidity },
-      { key: "bod", label: "생물학적 산소요구량(BOD)(mg/L)", value: bod },
-      { key: "clIonQnt", label: "염화물(mgCL/L)", value: chloride },
-      { key: "smll", label: "냄새", value: odor },
-      { key: "cdtnv", label: "전기전도도(㎲/cm)", value: ec },
-      { key: "crmty", label: "색도(도)", value: color },
-    ];
-
-    for (const field of requiredFields) {
-      if (isDisabled(field.key)) continue;
-      if (!field.value.trim()) {
-        alert(`${field.label} 을 입력해주세요.`);
-        return false;
-      }
-      if (field.key !== "smll" && !isNumeric(field.value)) {
-        alert(`${field.label} 은 숫자만 입력 가능합니다.`);
-        return false;
-      }
-    }
-
-    if (!isDisabled("ph") && (!ph.min.trim() || !ph.max.trim())) {
-      alert("수소이온농도(pH) 을 입력해주세요.");
-      return false;
-    }
-
-    return true;
-  };
-
-  const onSubmit = async () => {
-    if (submitting) return;
-    if (!validate()) return;
-
-    if (editMode && !updateAllowed) {
-      alert("진행상태가 신청인 경우에만 수정할 수 있습니다.");
-      return;
-    }
-
-    const sessionUser = getSessionUser();
-    const idFromQuery =
-      (searchParams.get("dmdInfoId") || "") + (searchParams.get("bznmTotNo") || "");
-    const dmdInfoId = String(sessionUser?.dmdInfoId || idFromQuery || "").trim();
-
-    if (!dmdInfoId) {
-      alert("수요처 정보가 없어 저장할 수 없습니다.");
-      return;
-    }
-
-    const disabledFields = Sdm.disableRules[usePurpose] || [];
-    const isDisabled = (field: string) => disabledFields.includes(field);
-    const parsedPh = isDisabled("ph") ? "" : `${ph.min.trim()}~${ph.max.trim()}`;
-    const cands = [cand1, cand2, cand3]
-      .map((name) => name.trim())
-      .filter(Boolean)
-      .map((name) => ({
-        ruseUtztnFcltNm: name,
-        ruseUtztnFcltCd: "",
-      }))
-      .filter((item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd);
-
-    const payload: DemandCompBizType = {
-      index: 0,
-      dmdInfoId,
-      dmdInfoFk: dmdInfoId,
-      bzmnNo: "",
-      dmdCoNm: String(sessionUser?.dmdCoNm || searchParams.get("dmdCoNm") || ""),
-      zip: String(sessionUser?.zip || searchParams.get("zip") || ""),
-      daddr: String(sessionUser?.daddr || searchParams.get("daddr") || ""),
-      telno: String(sessionUser?.telno || searchParams.get("telno") || ""),
-      rgtr: String(sessionUser?.rgtr || searchParams.get("rgtr") || ""),
-      useUsgCd: usePurpose.trim(),
-      ctpvCd: String(sessionUser?.ctpvCd || searchParams.get("ctpvCd") || ""),
-      sggCd: String(sessionUser?.sggCd || searchParams.get("sggCd") || ""),
-      dmdAplyPswd: "",
-      wntUntprc: toNumberOrEmpty(hopePrice),
-      dmndTmng: reqDate ? new Date(reqDate) : "",
-      dmndQty: toNumberOrEmpty(reqQty),
-      grssClfg: noDetect ? -1 : toNumberOrNull(coliform),
-      tn: toNumberOrNull(tn, isDisabled("tn")),
-      combResdch: toNumberOrNull(residualCl, isDisabled("combResdch")),
-      tph: toNumberOrNull(tp, isDisabled("tph")),
-      trbt: toNumberOrNull(turbidity, isDisabled("trbt")),
-      ph: parsedPh,
-      blgcOxygDmndQnt: toNumberOrNull(bod, isDisabled("bod")),
-      clIonQnt: toNumberOrNull(chloride, isDisabled("clIonQnt")),
-      smll: isDisabled("smll") ? "" : odor.trim(),
-      cdtnv: toNumberOrNull(ec, isDisabled("cdtnv")),
-      crmty: toNumberOrNull(color, isDisabled("crmty")),
-      rmrk: remark.trim(),
-      reqDt: "",
-      dmdInfoSn: editMode ? dmdInfoSn : 0,
-      status: String(searchParams.get("status") || ""),
-      splyCndtList: cands,
-    };
-
-    try {
-      setSubmitting(true);
-      if (editMode) {
-        const updatePayload = {
-          ...payload,
-          mdfr: String(sessionUser?.rgtr || payload.rgtr || ""),
-        };
-        await putFetch("/reuseFc/request/demandInfo", updatePayload);
-        alert("수요정보 수정 완료!");
-      } else {
-        await insertSdmInfoData(payload);
-      }
-      router.push("/apply/status");
-    } catch (error) {
-      console.error("Failed to submit demand info", error);
-      alert(editMode ? "수요정보 수정에 실패하였습니다." : "수요정보 등록에 실패하였습니다.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
   return (
     <>
     
-      <main className="bg-white">
+        <main className="bg-white">
 
-        {/* 서브 타이틀 + 브레드크럼 */}
-        <SubPageHeader
-            title="수요정보등록"
-            crumbs={[
-            { label: "Home", href: "/main" },
-            { label: "수요신청", href: "/apply/status" },
-            { label: "수요정보등록" },
-            ]}
-        />
+            {/* 서브 타이틀 + 브레드크럼 */}
+            <SubPageHeader
+                title="수요정보등록"
+                crumbs={[
+                { label: "Home", href: "/reuse" },
+                { label: "수요신청", href: "/reuse/apply" },
+                { label: "수요정보등록" },
+                ]}
+            />
 
-        {/* 컨텐츠 영역 */}
-        <div>
+            {/* 컨텐츠 영역 */}
+            <div>
 
-            {/* 기본정보 테이블 */}
-            <div className="border border-neutral-200 bg-white">
-                <FormRow label="요구시기" required>
-                    <DateInput value={reqDate} onChange={setReqDate} />
-                </FormRow>
+                {/* 기본정보 테이블 */}
+                <div className="border border-neutral-200 bg-white">
+                    <FormRow label="요구시기" required>
+                        <DateInput value={reqDate} onChange={setReqDate} />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="요구수량(m²/d)" required>
-                    <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
-                </FormRow>
+                    <FormRow label="요구수량(m²/d)" required>
+                        <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="사용용도" required>
-                    <TextInput value={usePurpose} onChange={setUsePurpose} />
-                </FormRow>
+                    <FormRow label="사용용도" required>
+                        <TextInput value={usePurpose} onChange={setUsePurpose} />
+                    </FormRow>
 
-                <Divider />
+                    <Divider />
 
-                <FormRow label="희망단가(원)" required>
-                    <TextInput value={hopePrice} onChange={setHopePrice} />
-                </FormRow>
-            </div>
-
-            {/* 요구수질 섹션 타이틀 바 */}
-            <div className="grid grid-cols-12">
-                <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
-                    <span className="text-lg font-semibold text-neutral-800">요구수질</span>
-                    <button
-                        type="button"
-                          onClick={() => setOpenRef(true)}
-                        className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
-                    >
-                        수질기준 참고
-                    </button>
-                    {/* 수질기준참고 모달 */}
-                    <WaterQualityRefModal
-                        open={openRef}
-                        onClose={() => setOpenRef(false)}
-                        imageSrc="/images/landing/water_quality_ref_1.png"
-                    />
+                    <FormRow label="희망단가(원)" required>
+                        <TextInput value={hopePrice} onChange={setHopePrice} />
+                    </FormRow>
                 </div>
-            </div>
 
-            {/* 요구수질 테이블 */}
-            <div className="border border-neutral-200 bg-white">
-                {/* 1행 */}
-                <QualityRow
-                    leftLabel="총대장균군수(개/mg)"
-                    leftRequired
-                    leftControl={
-                    <div className="flex items-center gap-4">
-                        <TextInput
-                        value={coliform}
-                        onChange={setColiform}
-                        disabled={noDetect}
-                        className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
-                        />
-                        <label className="flex items-center gap-2 text-sm text-neutral-700">
-                        <input
-                            type="checkbox"
-                            checked={noDetect}
-                            onChange={(e) => {
-                            setNoDetect(e.target.checked);
-                            if (e.target.checked) setColiform("");
-                            }}
-                            className="h-4 w-4 rounded border-neutral-300"
-                        />
-                        불검출
-                        </label>
-                    </div>
-                    }
-                    rightLabel="총질소(T-N)(mg/L)"
-                    rightControl={
-                    <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
-                    }
-                />
-                <Divider />
-
-                {/* 2행 */}
-                <QualityRow
-                    leftLabel="결합잔류염소(mg/L)"
-                    leftRequired
-                    leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
-                    rightLabel="총인(T-P)(mg/L)"
-                    rightControl={
-                    <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
-                    }
-                />
-                <Divider />
-
-                {/* 3행 */}
-                <QualityRow
-                    leftLabel="탁도(NTU)"
-                    leftRequired
-                    leftControl={
-                    <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
-                    }
-                    rightLabel="수소이온농도(pH)"
-                    rightControl={
-                    <div className="flex items-center gap-2">
-                        <TextInput
-                        value={ph.min}
-                        onChange={(v) => setPh((p) => ({ ...p, min: v }))}
-                        className="w-32"
-                        />
-                        <span className="text-neutral-500">~</span>
-                        <TextInput
-                        value={ph.max}
-                        onChange={(v) => setPh((p) => ({ ...p, max: v }))}
-                        className="w-32"
-                        />
-                    </div>
-                    }
-                />
-                <Divider />
-
-                {/* 4행 */}
-                <QualityRow
-                    leftLabel={
-                    <>
-                        생물화학적산소요구량
-                        <br />
-                        (BOD)(mg/L)
-                    </>
-                    }
-                    leftRequired
-                    leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
-                    rightLabel="염화물(mgCL/L)"
-                    rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
-                />
-                <Divider />
-
-                {/* 5행 */}
-                <QualityRow
-                    leftLabel="냄새"
-                    leftRequired
-                    leftControl={
-                    <select
-                        value={odor}
-                        onChange={(e) => setOdor(e.target.value)}
-                        className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
-                    >
-                        <option>불쾌하지 않을 것</option>
-                        <option>약간 있음</option>
-                        <option>있음</option>
-                    </select>
-                    }
-                    rightLabel="전기전도도(µs/cm)"
-                    rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
-                />
-                <Divider />
-
-                {/* 6행 */}
-                <QualityRow
-                    leftLabel="색도(도)"
-                    leftRequired
-                    leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
-                    rightLabel="비고"
-                    rightControl={
-                    <textarea
-                        value={remark}
-                        onChange={(e) => setRemark(e.target.value)}
-                        className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
-                    />
-                    }
-                />
-                <Divider />
-
-                {/* 후보지 선택 */}
+                {/* 요구수질 섹션 타이틀 바 */}
                 <div className="grid grid-cols-12">
-                    <LabelCell>
-                    공급처 후보지 선택
-                    <br />
-                    (필수아님)
-                    </LabelCell>
+                    <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
+                        <span className="text-lg font-semibold text-neutral-800">요구수질</span>
+                        <button
+                            type="button"
+                             onClick={() => setOpenRef(true)}
+                            className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
+                        >
+                            수질기준 참고
+                        </button>
+                        {/* 수질기준참고 모달 */}
+                        <WaterQualityRefModal
+                            open={openRef}
+                            onClose={() => setOpenRef(false)}
+                            imageSrc="/images/landing/water_quality_ref_1.png"
+                        />
+                    </div>
+                </div>
 
-                    <div className="col-span-12 md:col-span-10 p-6">
-                        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
-                            <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
-                            <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
-                            <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+                {/* 요구수질 테이블 */}
+                <div className="border border-neutral-200 bg-white">
+                    {/* 1행 */}
+                    <QualityRow
+                        leftLabel="총대장균군수(개/mg)"
+                        leftRequired
+                        leftControl={
+                        <div className="flex items-center gap-4">
+                            <TextInput
+                            value={coliform}
+                            onChange={setColiform}
+                            disabled={noDetect}
+                            className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
+                            />
+                            <label className="flex items-center gap-2 text-sm text-neutral-700">
+                            <input
+                                type="checkbox"
+                                checked={noDetect}
+                                onChange={(e) => {
+                                setNoDetect(e.target.checked);
+                                if (e.target.checked) setColiform("");
+                                }}
+                                className="h-4 w-4 rounded border-neutral-300"
+                            />
+                            불검출
+                            </label>
+                        </div>
+                        }
+                        rightLabel="총질소(T-N)(mg/L)"
+                        rightControl={
+                        <InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
+                        }
+                    />
+                    <Divider />
 
-                            <div className="flex items-center gap-3 xl:ml-2">
-                            <button
-                                type="button"
-                                className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
-                                onClick={() => {
-                                // TODO: 후보지 조회 모달/검색 연결
-                                console.log("후보지 조회", { cand1, cand2, cand3 });
-                                }}
-                            >
-                                후보지 조회
-                            </button>
-                            <button
-                                type="button"
-                                className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
-                                onClick={() => {
-                                // TODO: 유사사례 연결
-                                console.log("유사사례");
-                                }}
-                            >
-                                유사사례
-                            </button>
+                    {/* 2행 */}
+                    <QualityRow
+                        leftLabel="결합잔류염소(mg/L)"
+                        leftRequired
+                        leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+                        rightLabel="총인(T-P)(mg/L)"
+                        rightControl={
+                        <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
+                        }
+                    />
+                    <Divider />
+
+                    {/* 3행 */}
+                    <QualityRow
+                        leftLabel="탁도(NTU)"
+                        leftRequired
+                        leftControl={
+                        <InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
+                        }
+                        rightLabel="수소이온농도(pH)"
+                        rightControl={
+                        <div className="flex items-center gap-2">
+                            <TextInput
+                            value={ph.min}
+                            onChange={(v) => setPh((p) => ({ ...p, min: v }))}
+                            className="w-32"
+                            />
+                            <span className="text-neutral-500">~</span>
+                            <TextInput
+                            value={ph.max}
+                            onChange={(v) => setPh((p) => ({ ...p, max: v }))}
+                            className="w-32"
+                            />
+                        </div>
+                        }
+                    />
+                    <Divider />
+
+                    {/* 4행 */}
+                    <QualityRow
+                        leftLabel={
+                        <>
+                            생물화학적산소요구량
+                            <br />
+                            (BOD)(mg/L)
+                        </>
+                        }
+                        leftRequired
+                        leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+                        rightLabel="염화물(mgCL/L)"
+                        rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+                    />
+                    <Divider />
+
+                    {/* 5행 */}
+                    <QualityRow
+                        leftLabel="냄새"
+                        leftRequired
+                        leftControl={
+                        <select
+                            value={odor}
+                            onChange={(e) => setOdor(e.target.value)}
+                            className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+                        >
+                            <option>불쾌하지 않을 것</option>
+                            <option>약간 있음</option>
+                            <option>있음</option>
+                        </select>
+                        }
+                        rightLabel="전기전도도(µs/cm)"
+                        rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
+                    />
+                    <Divider />
+
+                    {/* 6행 */}
+                    <QualityRow
+                        leftLabel="색도(도)"
+                        leftRequired
+                        leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
+                        rightLabel="비고"
+                        rightControl={
+                        <textarea
+                            value={remark}
+                            onChange={(e) => setRemark(e.target.value)}
+                            className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
+                        />
+                        }
+                    />
+                    <Divider />
+
+                    {/* 후보지 선택 */}
+                    <div className="grid grid-cols-12">
+                        <LabelCell>
+                        공급처 후보지 선택
+                        <br />
+                        (필수아님)
+                        </LabelCell>
+
+                        <div className="col-span-12 md:col-span-10 p-6">
+                            <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
+                                <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
+                                <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
+                                <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+
+                                <div className="flex items-center gap-3 xl:ml-2">
+                                <button
+                                    type="button"
+                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                                    onClick={() => setOpenCand(true)}
+                                >
+                                    후보지 조회
+                                </button>
+                                <button
+                                    type="button"
+                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
+                                    onClick={() => {
+                                    // TODO: 유사사례 연결
+                                    console.log("유사사례");
+                                    }}
+                                >
+                                    유사사례
+                                </button>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            {/* 하단 버튼 */}
-            <div className="flex justify-center py-12">
-                <button
-                    type="button"
-                    disabled={submitting}
-                    className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
-                    onClick={onSubmit}
-                >
-                    {editMode ? "수요정보 수정" : "수요정보 등록"}
-                </button>
-            </div>
+                {/* 하단 버튼 */}
+                <div className="flex justify-center py-12">
+                    <button
+                        type="button"
+                        className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+                        onClick={() => {
+                        // TODO: 저장 처리
+                        console.log("수요정보 등록");
+                        }}
+                    >
+                        수요정보 등록
+                    </button>
+                </div>
 
-        </div>
-      </main>
+            </div>
+        </main>
+
+        <CandidateSiteModal
+            open={openCand}
+            onClose={() => setOpenCand(false)}
+            initialSelected={selectedCands}
+            onApply={(list) => {
+                setSelectedCands(list);
+
+                // ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
+                setCand1(list[0]?.name ?? "");
+                setCand2(list[1]?.name ?? "");
+                setCand3(list[2]?.name ?? "");
+
+                setOpenCand(false);
+            }}
+        />
     </>
   );
 }
 
-export default function DemandRegisterPage() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <DemandRegisterPageContent />
-    </Suspense>
-  );
-}
-
 /* ----------------------------- UI helpers ----------------------------- */
 
 function Divider() {

apps/dm_new/app/(with-layout)/apply/status/page.tsx

@@ -1,179 +1,157 @@
-// apps/dm/app/(landing)/reuse/apply/status/page.tsx
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import SubPageHeader from "@/components/SubPageHeader";
-
-type WaterDetail = {
-  toc: string;
-  bdo: string;
-  tn: string;
-  tp: string;
-  cl: string;
-  conductivity: string;
-  coliform: string;
-  turbidity: string;
-  odor: string;
-  color: string;
-  ph: string;
-  note: string;
-};
-
-type Row = {
-  id: number;
-  sido: string;
-  sigungu: string;
-  company: string;
-  address: string;
-  phone: string;
-  date: string;
-  status: "진행중" | "진행완료";
-  detail: {
-    reqDate: string;
-    reqQty: string;
-    usePurpose: string;
-    price: string;
-    water: WaterDetail;
-    candidates: [string, string, string];
-  };
-};
-
-const MOCK: Row[] = [
-  {
-    id: 1,
-    sido: "서울특별시",
-    sigungu: "금천구",
-    company: "서울워터솔루션(주)",
-    address: "서울특별시 금천구 가산디지털2로 119, 24층(가산동)",
-    phone: "010-0000-0000",
-    date: "2025-01-14",
-    status: "진행중",
-    detail: {
-      reqDate: "2025-02",
-      reqQty: "1,200",
-      usePurpose: "공업용수",
-      price: "350",
-      water: {
-        toc: "4",
-        bdo: "3",
-        tn: "10",
-        tp: "1.0",
-        cl: "120",
-        conductivity: "800",
-        coliform: "0",
-        turbidity: "2",
-        odor: "무",
-        color: "무",
-        ph: "7.2",
-        note: "-",
-      },
-      candidates: ["후보지1", "후보지2", "후보지3"],
-    },
-  },
-  {
-    id: 2,
-    sido: "제주특별자치도",
-    sigungu: "서귀포",
-    company: "회사명이 길어도괜찮지",
-    address: "제주특별자치도 서귀포시 천제연로 156, 3층 2호(색달동 1077호)",
-    phone: "010-0000-0000",
-    date: "2025-01-14",
-    status: "진행완료",
-    detail: {
-      reqDate: "2025-03",
-      reqQty: "800",
-      usePurpose: "조경용수",
-      price: "300",
-      water: {
-        toc: "5",
-        bdo: "4",
-        tn: "12",
-        tp: "1.2",
-        cl: "140",
-        conductivity: "900",
-        coliform: "0",
-        turbidity: "3",
-        odor: "무",
-        color: "무",
-        ph: "7.0",
-        note: "현장 협의",
-      },
-      candidates: ["후보지1", "후보지2", "후보지3"],
-    },
-  },
-];
-
-function StatusBadge({ v }: { v: Row["status"] }) {
-  const cls = v === "진행중" ? "text-red-600" : "text-lime-600";
-  return <span className={["font-medium", cls].join(" ")}>{v}</span>;
-}
+import { useDmStore } from "@/app/store";
+import type { DemandCompBizType } from "@/app/store/sdmMng";
 
 type TopField = { label: string; value: string; required?: boolean };
 type PairField = { label: string; value: string };
+type SessionUser = { dmdInfoId?: string };
+
+const formatDate = (value: string | Date | "" | undefined) => {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+};
+
+const formatValue = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return String(value);
+};
+
+const formatBelow = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "-";
+  if (Number(value) === -1) return "불검출";
+  return `${value} 이하`;
+};
+
+function StatusBadge({ v }: { v: string }) {
+  const cls = v === "신청" ? "text-red-600" : "text-lime-600";
+  return <span className={["font-medium", cls].join(" ")}>{v || "-"}</span>;
+}
 
 export default function DemandStatusPage() {
-  const rows = useMemo(() => MOCK, []);
+  const { getSdmInfoStatusList, Sdm, Common } = useDmStore((state) => state);
+  const { successLogin, sdmInfoStatusList } = Sdm;
+  const { selectSidoData, selectSigunData } = Common;
 
-  // ✅ rows가 빈 경우도 대비 (런타임 오류 방지)
-  const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
-
-  // ✅ 상세영역 스크롤 이동용
   const detailRef = useRef<HTMLDivElement | null>(null);
 
-  // ✅ selected 계산 안정화
-  const selected = useMemo(() => {
-    if (!rows.length) return null;
-    const found = rows.find((r) => r.id === selectedId);
-    return found ?? rows[0];
-  }, [rows, selectedId]);
+  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
+  const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
+  const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
 
-  // ✅ rows가 바뀌었는데 selectedId가 null이면 자동 첫번째 선택
   useEffect(() => {
-    const first = rows[0];
-    if (!first) return; // ✅ rows가 비어있으면 종료 (TS + 런타임 안전)
+    const user = sessionStorage.getItem("user");
+    if (user) {
+      setIsLoginStorageInfo(true);
+    }
+  }, []);
 
-    if (selectedId == null) setSelectedId(first.id);
-  }, [rows, selectedId]);
+  useEffect(() => {
+    if (!successLogin && !isLoginStorageInfo) return;
+
+    const user = sessionStorage.getItem("user");
+    if (!user) return;
+
+    try {
+      const userData = JSON.parse(user) as SessionUser;
+      const dmdInfoId = userData.dmdInfoId?.trim();
+      if (dmdInfoId) {
+        getSdmInfoStatusList(dmdInfoId);
+      }
+    } catch (error) {
+      console.error("Error parsing user data:", error);
+    }
+  }, [successLogin, isLoginStorageInfo, getSdmInfoStatusList]);
+
+  useEffect(() => {
+    const mappedList = sdmInfoStatusList.map((item) => ({
+      ...item,
+      ctpvCd: selectSidoData.find((sido) => sido.val === item.ctpvCd?.trim())?.text || item.ctpvCd,
+      sggCd: selectSigunData.find((sigun) => sigun.val === item.sggCd?.trim())?.text || item.sggCd,
+    }));
+
+    setTransformedSdmInfoStatusList(mappedList);
+  }, [sdmInfoStatusList, selectSidoData, selectSigunData]);
+
+  useEffect(() => {
+    const first = transformedSdmInfoStatusList[0];
+    if (!first) {
+      setSelectedDmdInfoSn(null);
+      return;
+    }
+
+    if (selectedDmdInfoSn == null) {
+      setSelectedDmdInfoSn(first.dmdInfoSn);
+      return;
+    }
+
+    const exists = transformedSdmInfoStatusList.some(
+      (item) => item.dmdInfoSn === selectedDmdInfoSn,
+    );
+    if (!exists) {
+      setSelectedDmdInfoSn(first.dmdInfoSn);
+    }
+  }, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
+
+  const selectedSdmInfoStatus = useMemo(() => {
+    if (!transformedSdmInfoStatusList.length) return null;
+    return (
+      transformedSdmInfoStatusList.find((item) => item.dmdInfoSn === selectedDmdInfoSn) ??
+      transformedSdmInfoStatusList[0]
+    );
+  }, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
 
-  // ✅ 상단 2행(요구시기/요구수량/사용용도/희망단가) - TS 안전하게 object로 구성
   const topFields: TopField[] = useMemo(() => {
-    if (!selected) return [];
-    return [
-      { label: "요구시기", value: selected.detail.reqDate, required: true },
-      { label: "요구수량(㎡/d)", value: selected.detail.reqQty },
-      { label: "사용용도", value: selected.detail.usePurpose },
-      { label: "희망단가(원)", value: selected.detail.price },
-    ];
-  }, [selected]);
+    if (!selectedSdmInfoStatus) return [];
+
+    return [
+      { label: "요구시기", value: formatDate(selectedSdmInfoStatus.dmndTmng), required: true },
+      { label: "요구수량(㎥/d)", value: formatValue(selectedSdmInfoStatus.dmndQty) },
+      { label: "사용용도", value: formatValue(selectedSdmInfoStatus.useUsgCd) },
+      { label: "희망단가(원/㎥)", value: formatValue(selectedSdmInfoStatus.wntUntprc) },
+    ];
+  }, [selectedSdmInfoStatus]);
 
-  // ✅ 수질 항목 - TS 안전
   const waterFields: PairField[] = useMemo(() => {
-    if (!selected) return [];
-    const w = selected.detail.water;
+    if (!selectedSdmInfoStatus) return [];
+
     return [
-      { label: "총대장균군수(개/100mℓ)", value: w.coliform },
-      { label: "결합잔류염소(mg/L)", value: "-" },
-      { label: "탁도(NTU)", value: w.turbidity },
+      { label: "총대장균군수(개/100mL)", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
+      { label: "결합잔류염소(mg/L)", value: formatBelow(selectedSdmInfoStatus.combResdch) },
+      { label: "탁도(NTU)", value: formatBelow(selectedSdmInfoStatus.trbt) },
 
-      { label: "생물화학적산소요구량(BOD)(mg/L)", value: w.bdo },
-      { label: "냄새", value: w.odor },
-      { label: "색도(도)", value: w.color },
+      { label: "생물학적산소요구량(BOD)(mg/L)", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
+      { label: "냄새", value: formatValue(selectedSdmInfoStatus.smll) },
+      { label: "색도(도)", value: formatBelow(selectedSdmInfoStatus.crmty) },
 
-      { label: "총질소(T-N)(mg/L)", value: w.tn },
-      { label: "총인(T-P)(mg/L)", value: w.tp },
-      { label: "수소이온농도(pH)", value: w.ph },
+      { label: "총질소(T-N)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tn) },
+      { label: "총인(T-P)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tph) },
+      { label: "수소이온농도(pH)", value: formatValue(selectedSdmInfoStatus.ph) },
 
-      { label: "염화물(mgCL/L)", value: w.cl },
-      { label: "전기전도도(µs/cm)", value: w.conductivity },
-      { label: "비고", value: w.note },
+      { label: "염화물(mgCL/L)", value: formatBelow(selectedSdmInfoStatus.clIonQnt) },
+      { label: "전기전도도(μS/cm)", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
+      { label: "비고", value: formatValue(selectedSdmInfoStatus.rmrk) },
     ];
-  }, [selected]);
+  }, [selectedSdmInfoStatus]);
 
-  const onSelectRow = (id: number) => {
-    setSelectedId(id);
+  const candidateNames = useMemo(() => {
+    const list = selectedSdmInfoStatus?.splyCndtList ?? [];
+    return [
+      list[0]?.ruseUtztnFcltNm ?? "",
+      list[1]?.ruseUtztnFcltNm ?? "",
+      list[2]?.ruseUtztnFcltNm ?? "",
+    ];
+  }, [selectedSdmInfoStatus]);
 
-    // ✅ “행 클릭 → 아래 상세로 보여짐” 체감 확실히: 상세영역으로 이동
-    // (사용자가 이미 아래를 보고 있다면 거의 움직이지 않음)
+  const onSelectSdmInfoStatus = (dmdInfoSn: number | "") => {
+    setSelectedDmdInfoSn(dmdInfoSn);
     requestAnimationFrame(() => {
       detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
     });
@@ -181,158 +159,182 @@ export default function DemandStatusPage() {
 
   return (
     <main className="bg-white">
-        {/* 서브 타이틀 + 브레드크럼 */}
-        <SubPageHeader
-            title="수요신청현황"
-            crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "수요신청", href: "/reuse/apply" },
-            { label: "수요신청현황" },
-            ]}
-            hideFooterLine
-            hideGuideText
-        />
+      <SubPageHeader
+        title="수요신청현황"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "수요신청", href: "/apply/status" },
+          { label: "수요신청현황" },
+        ]}
+        hideFooterLine
+        hideGuideText
+      />
 
-        {/* 컨텐츠 영역 */}
-        <div>
-            {/* 리스트 테이블 */}
-            <section className="mt-6">
-                <div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
+      <div>
+        <section className="mt-6">
+          <div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
 
-                <div className="mt-3 border border-neutral-200">
-                    <table className="w-full table-fixed">
-                    <thead className="bg-[#E7F4E2]">
-                        <tr className="text-sm text-slate-700">
-                        <th className="w-[60px] px-3 py-3 text-center">NO.</th>
-                        <th className="w-[120px] px-3 py-3 text-center">시도</th>
-                        <th className="w-[120px] px-3 py-3 text-center">시군구</th>
-                        <th className="w-[180px] px-3 py-3 text-center">회사명</th>
-                        <th className="px-3 py-3 text-center">공장주소</th>
-                        <th className="w-[140px] px-3 py-3 text-center">전화번호</th>
-                        <th className="w-[120px] px-3 py-3 text-center">신청일자</th>
-                        <th className="w-[110px] px-3 py-3 text-center">진행상태</th>
-                        </tr>
-                    </thead>
+          <div className="mt-3 border border-neutral-200">
+            <table className="w-full table-fixed">
+              <thead className="bg-[#E7F4E2]">
+                <tr className="text-sm text-slate-700">
+                  <th className="w-[60px] px-3 py-3 text-center">NO.</th>
+                  <th className="w-[120px] px-3 py-3 text-center">시도</th>
+                  <th className="w-[120px] px-3 py-3 text-center">시군구</th>
+                  <th className="w-[180px] px-3 py-3 text-center">회사명</th>
+                  <th className="px-3 py-3 text-center">공장주소</th>
+                  <th className="w-[140px] px-3 py-3 text-center">전화번호</th>
+                  <th className="w-[120px] px-3 py-3 text-center">신청일자</th>
+                  <th className="w-[110px] px-3 py-3 text-center">진행상태</th>
+                </tr>
+              </thead>
 
-                    <tbody className="bg-white text-base text-slate-700">
-                        {rows.length === 0 ? (
-                        <tr>
-                            <td colSpan={8} className="px-3 py-10 text-center text-slate-400">
-                            조회된 신청내역이 없습니다.
-                            </td>
-                        </tr>
-                        ) : (
-                        rows.map((r) => {
-                            const active = r.id === selected?.id;
-                            return (
-                            <tr
-                                key={r.id}
-                                role="button"
-                                tabIndex={0}
-                                onClick={() => onSelectRow(r.id)}
-                                onKeyDown={(e) => {
-                                if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
-                                }}
-                                className={[
-                                "border-t border-neutral-200 outline-none",
-                                "cursor-pointer",
-                                active ? "bg-slate-50" : "hover:bg-slate-50",
-                                "focus-visible:ring-2 focus-visible:ring-slate-300",
-                                ].join(" ")}
-                                aria-selected={active}
-                            >
-                                <td className="px-3 py-3 text-center">{r.id}</td>
-                                <td className="px-3 py-3 text-center">{r.sido}</td>
-                                <td className="px-3 py-3 text-center">{r.sigungu}</td>
-                                <td className="px-3 py-3 text-center">{r.company}</td>
-                                <td className="px-3 py-3 text-center">{r.address}</td>
-                                <td className="px-3 py-3 text-center">{r.phone}</td>
-                                <td className="px-3 py-3 text-center">{r.date}</td>
-                                <td className="px-3 py-3 text-center">
-                                <StatusBadge v={r.status} />
-                                </td>
-                            </tr>
-                            );
-                        })
-                        )}
-                    </tbody>
-                    </table>
-                </div>
-            </section>
+              <tbody className="bg-white text-base text-slate-700">
+                {transformedSdmInfoStatusList.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="px-3 py-10 text-center text-slate-400">
+                      조회된 신청내역이 없습니다.
+                    </td>
+                  </tr>
+                ) : (
+                  transformedSdmInfoStatusList.map((sdmInfoStatus, index) => {
+                    const active = sdmInfoStatus.dmdInfoSn === selectedSdmInfoStatus?.dmdInfoSn;
+                    return (
+                      <tr
+                        key={`${sdmInfoStatus.dmdInfoSn}-${index}`}
+                        role="row"
+                        tabIndex={0}
+                        onClick={() => onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn);
+                          }
+                        }}
+                        className={[
+                          "border-t border-neutral-200 outline-none",
+                          "cursor-pointer",
+                          active ? "bg-slate-50" : "hover:bg-slate-50",
+                          "focus-visible:ring-2 focus-visible:ring-slate-300",
+                        ].join(" ")}
+                        aria-selected={active}
+                      >
+                        <td className="px-3 py-3 text-center">{sdmInfoStatus.index || index + 1}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.ctpvCd)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.sggCd)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.dmdCoNm)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.daddr)}</td>
+                        <td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.telno)}</td>
+                        <td className="px-3 py-3 text-center">{formatDate(sdmInfoStatus.dmndTmng)}</td>
+                        <td className="px-3 py-3 text-center">
+                          <StatusBadge v={formatValue(sdmInfoStatus.status)} />
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </section>
 
-            {/* 상세현황 */}
-            <section className="mt-10 pb-16" ref={detailRef}>
+        <section className="mt-10 pb-16" ref={detailRef}>
+          <div className="flex justify-between items-center">
             <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+            <button
+              type="button"
+              className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+            >
+              수정
+            </button>
+          </div>
 
-            {!selected ? (
-                <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
-                상세 정보를 표시할 신청건이 없습니다.
-                </div>
-            ) : (
-                <div className="mt-3 border border-neutral-200">
-                <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    요구수량
+          {!selectedSdmInfoStatus ? (
+            <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
+              상세 정보를 표시할 신청건이 없습니다.
+            </div>
+          ) : (
+            <div className="mt-3 border border-neutral-200">
+              <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                요구수량
+              </div>
+
+              <div className="grid grid-cols-12 text-sm">
+                {topFields.map((field) => (
+                  <div
+                    key={field.label}
+                    className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
+                  >
+                    <div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      {field.label}
+                      {field.required ? <span className="ml-1 text-red-500">*</span> : null}
+                    </div>
+                    <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
+                      {field.value}
+                    </div>
+                  </div>
+                ))}
+
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                  요구수질
                 </div>
 
-                <div className="grid grid-cols-12 text-sm">
-                    {/* 상단 2행 */}
-                    {topFields.map((f) => (
-                    <div
-                        key={f.label}
-                        className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
-                    >
-                        <div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        {f.label}
-                        {f.required ? <span className="ml-1 text-red-500">*</span> : null}
-                        </div>
-                        <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
-                        {f.value}
-                        </div>
+                {waterFields.map((field) => (
+                  <div
+                    key={field.label}
+                    className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
+                  >
+                    <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      {field.label}
                     </div>
-                    ))}
+                    <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                      {field.value}
+                    </div>
+                  </div>
+                ))}
 
-                    {/* 수질 */}
-                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    요구수질
-                    </div>
-
-                    {waterFields.map((f) => (
-                    <div
-                        key={f.label}
-                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
-                    >
-                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        {f.label}
-                        </div>
-                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {f.value}
-                        </div>
-                    </div>
-                    ))}
-
-                    {/* 공급처 후보지 */}
-                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
-                    공급처 후보지
-                    </div>
-
-                    {selected.detail.candidates.map((v, i) => (
-                    <div
-                        key={`candidate-${i}`}
-                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
-                    >
-                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                        후보지{i + 1}
-                        </div>
-                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                        {v}
-                        </div>
-                    </div>
-                    ))}
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                  공급처 후보지
                 </div>
+
+                {candidateNames.map((candidateName, index) => (
+                  <div
+                    key={`candidate-${index}`}
+                    className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
+                  >
+                    <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                      후보지{index + 1}
+                    </div>
+                    <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                      {candidateName}
+                    </div>
+                  </div>
+                ))}
+
+                <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
+                  수요신청 진행상태
                 </div>
-            )}
-            </section>
-        </div>
+
+                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                    진행상태
+                  </div>
+                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                    {formatValue(selectedSdmInfoStatus.status)}
+                  </div>
+                </div>
+                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                    공급처매칭결과
+                  </div>
+                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                    {formatValue(selectedSdmInfoStatus.ruseUtztnFcltNm)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
     </main>
   );
 }

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>
-      <TopNav />
-      <div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
+      <div className="pt-[83px]">{/* TopNav 높이만큼 */}
+        <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>
@@ -62,4 +66,4 @@ export default function Cases() {
       </div>
     </section>
   );
-}
+}

apps/dm_new/app/main/_sections/Hero.tsx

@@ -1,4 +1,5 @@
 // app/main/_sections/Hero.tsx
+import Image from "next/image";
 import styles from "../../reuse.module.css";
 
 export default function Hero() {
@@ -21,9 +22,15 @@ export default function Hero() {
         </div>
       </div>
       <div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
-        <img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
+        <Image
+          src="/images/landing/scroll_down.svg"
+          alt=""
+          width={26}
+          height={40}
+          className="w-[26px] h-[40px]"
+        />
         <span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
       </div>
     </section>
   );
-}
+}

apps/dm_new/app/main/_sections/IntroCards.tsx

@@ -1,12 +1,17 @@
 // apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
 "use client";
 
+import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
+import card01 from "@/public/images/landing/card_01.jpg";
+import card02 from "@/public/images/landing/card_02.jpg";
+import card03 from "@/public/images/landing/card_03.jpg";
+import card04 from "@/public/images/landing/card_04.jpg";
 
 type IntroCardItem = {
   title: string;
   desc: string;
-  image: string;
+  image: StaticImageData;
   href: string;
 };
 
@@ -14,25 +19,25 @@ const INTRO_CARDS: IntroCardItem[] = [
   {
     title: "물 재이용 법",
     desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
-    image: "/images/landing/card_01.jpg",
+    image: card01,
     href: "/reuse/intro/law",
   },
   {
     title: "친환경 수자원 빗물",
     desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
-    image: "/images/landing/card_02.jpg",
+    image: card02,
     href: "/reuse/intro/rain",
   },
   {
     title: "알뜰하게 재이용되는 중수",
     desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
-    image: "/images/landing/card_03.jpg",
+    image: card03,
     href: "/reuse/intro/greywater",
   },
   {
     title: "하수처리수 재이용",
     desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
-    image: "/images/landing/card_04.jpg",
+    image: card04,
     href: "/reuse/intro/treated",
   },
 ];
@@ -61,10 +66,12 @@ export default function IntroCards() {
                     className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
                 >
                     {/* 배경 이미지 (이미 그라디언트 포함) */}
-                    <img
-                    src={card.image}
-                    alt={card.title}
-                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+                    <Image
+                      src={card.image}
+                      alt={card.title}
+                      fill
+                      sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
+                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                     />
 
                     {/* 텍스트 영역 */}
@@ -83,4 +90,4 @@ export default function IntroCards() {
       </div>
     </section>
   );
-}
+}

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,10 +87,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
             >
               {safeSlides.map((s, i) => (
                 <div key={`${s.src}-${i}`} className="min-w-full">
-                  <img
+                  <Image
                     src={s.src}
                     alt={s.alt ?? `slide-${i + 1}`}
+                    width={583}
+                    height={400}
                     className="w-full h-full object-contain"
+                    style={{ width: "100%", height: "100%" }}
                     draggable={false}
                   />
                 </div>

apps/dm_new/components/CaseTabsCarousel.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import Image from "next/image";
 
 /**
  * CaseTabsCarousel.tsx (FINAL OPTIMIZED)
@@ -459,10 +460,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="이전"
           >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -480,10 +483,12 @@ export default function CaseTabsCarousel() {
             ].join(" ")}
             aria-label="다음"
           >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-6 h-6 object-contain"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
             />
           </button>
 
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
                             className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
                           >
                             <div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
-                              <img
+                              <Image
                                 src={c.imageSrc}
                                 alt={c.title}
+                                width={640}
+                                height={241}
                                 className="h-full w-full object-cover"
+                                style={{ width: "100%", height: "100%" }}
                                 loading="lazy"
                               />
                             </div>

apps/dm_new/components/ImageSlider.tsx

@@ -1,6 +1,7 @@
 // apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
 "use client";
 
+import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 type Slide = { src: string; alt?: string };
@@ -86,10 +87,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_left_arrow.png"
-                alt="이전"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
                         w-[80px] h-[80px] rounded-full border border-black/20 bg-white
                         grid place-items-center shadow-sm hover:bg-black/[0.03]"
             >
-            <img
-                src="/images/landing/icon_right_arrow.png"
-                alt="다음"
-                className="w-[12px] h-[22px]"
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
             />
           </button>
 
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
             >
               {safeSlides.map((s, i) => (
                 <div key={`${s.src}-${i}`} className="min-w-full">
-                  <img
+                  <Image
                     src={s.src}
                     alt={s.alt ?? `slide-${i + 1}`}
+                    width={583}
+                    height={400}
                     className="w-full h-full object-contain"
+                    style={{ width: "100%", height: "100%" }}
                     draggable={false}
                   />
                 </div>

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

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/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 = [
@@ -845,4 +845,4 @@ export const numberFields = [
   'mesureIntrvl', 'qltwtrCo', 'rnysnFvlc', 'clarFvlc',
   'bizAmt', 'count',
   'chmbr_xcnts', 'chmbr_ydnts'
-];
+];

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 };
+  pplMngNo?: string; // 관로관리번호
+};
 
-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("");
+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 }[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
-  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
-  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0); // 침입수분석 정보 선택시 사용
+  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: [],
+    chartData1: [],
+    chartData2: [],
   });
-  const [inftwtQty, setInftwtQty] = useState<string>("0"); // 침입수량
-  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
+  const [inftwtQty, setInftwtQty] = useState<string>('0');
 
-  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); // 팝업 열기
-  };
+  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) {
-      setInftwtAnls(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'));
-      }
-    });
-    setPopupOpen(false);
-  };
+  const handleReset = () => {
+    resetState();
+  }
 
   const renderBody = () => (
-    <>
-      <div className="text-black text-3xl font-bold mb-5">침입수분석결과</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 className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
       </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>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                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>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                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}
-              />
-            </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}
-              />
+
+      <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-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={aplcnYms}
+                  value={selectedAplcnYm}
+                  onSelectValue={handleAplcnYmChange}
+                />
+              </div>
+
+              <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-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={inftwtAnlsInfos}
+                  value={selectedInftwtAnls}
+                  onSelectValue={handleInftwtAnlsSnChange}
+                />
+              </div>
+
+              {renderInfoInput('오수전환율:', inftwtAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('시간패턴 파일명:', inftwtAnls?.atflHrPttnNm ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', inftwtAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', inftwtAnls?.atflInpNm ?? '')}
+              {renderInfoInput('유량 파일명:', inftwtAnls?.atflOilqNm ?? '')}
             </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 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>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+        </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>
+        </section>
+      </div>
+    </div>
+  );
 
   return (
     <UiModal
@@ -270,17 +281,17 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
-            max-w-none
-            max-h-none
-            overflow-visible
-            z-[50]
-          `}
+        w-[78vw]
+        max-w-none
+        min-w-[1000px]
+        min-h-[72vh]
+        overflow-visible
+        z-[50]
+      `}
       body={renderBody()}
-      noFooterYn='Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
-export default React.memo(InfilChart);
+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 = {
-    label : string;
-    lineVal0 : number;
-    barVal0 : number;
-}
+  pplMngNo?: string; // 관로관리번호
+};
 
+type LineBarChartData = {
+  label: string;
+  lineVal0: number;
+  barVal0: number;
+};
 
-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 INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+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 [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 openPopup = () => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
-      setPopupPosition({
-        top: rect.bottom + window.scrollY, // 버튼 아래쪽
-        left: rect.left + window.scrollX, // 버튼 왼쪽
-      });
-    }
-    setPopupOpen(true); // 팝업 열기
-  };
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
 
   const chartForm = CHART_FORM.LINEBAR2;
   const chartConfig = {
-     barVal0: {
+    barVal0: {
       label: '강수량',
-      color: "#33AAFF",
+      color: '#33AAFF',
     },
     lineVal0: {
       label: 'RDII',
-      color: "#FF0000",
+      color: '#FF0000',
     },
   } as ChartConfig;
 
+  const hasChartData = useMemo(() => chartData.length > 0, [chartData]);
+
+  const resetState = () => {
+    setAplcnYm(''); // 상수사용월 초기화
+    setRdiiAnlss([]); // 강우유입수분석 초기화
+    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); // 강우유입수분석정보 초기화
+    setRdiiAnls(null); // 강우유입수분석정보 초기화
+    setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
+    setChartData([]);
+    setRdiiQty('0');  // 강우유입수량 초기화
+    setRainTotal('0');// 적용강우량 초기화
+    setTotalVolume('0');// 총체적 m³/mm 초기화
+  };
+
   useEffect(() => {
-    if (isModalOpen === false) {
-      setPopupOpen(true); // 모달이 닫힐 때 팝업은
-      setAplcnYm(""); // 상수사용월 초기화
-      setRdiiAnlss([]); // 강우유입수분석 초기화
-      setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
-      setRdiiAnls(null); // 강우유입수분석정보 초기화
-      setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
-      setChartData([]); // 차트 데이터 초기화
-      setRdiiQty("0"); // 강우유입수량 초기화
-      setRainTotal("0"); // 적용강우량 초기화
-      setTotalVolume("0"); // 총체적 m³/mm 초기화
+    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);
-        setRdiiAnlss([]);
-        setRdiiAnlsInfos([]);
-      });
-  }, [aplcnYm]);
 
-  // 값 표시
-  useEffect(() => {
-    // 선택된 강우유입수분석 정보에 대한 처리 로직
-    if (rainInfwtAnlsSn === 0) return;
-    const selectedAnls = rdiiAnlss.find(anls => anls.rainInfwtAnlsSn === rainInfwtAnlsSn);
-    if (selectedAnls) {
-      setRdiiAnls(selectedAnls);
+    try {
+      const data = await fn.selectRdiiAnls(selectedValue); // 상수사용월 변경시 분석 정보 리스트 가져오기
+      const list = data ?? [];
+      setRdiiAnlss(list);
+      setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list));
+    } catch (error) {
+      console.error('selectRdiiAnls 에러:', error);
+      setRdiiAnlss([]);
+      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);
+
+    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);// 차트 데이터 설정
+
+      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>
+  );
 
-    rsltDataformatted.forEach(item => {
-      const matchedVal = rainMap.get(item.label);
-      if (matchedVal !== undefined) {
-        item.barVal0 = matchedVal;
-      }
-    });
-    setChartData(rsltDataformatted); // 차트 데이터 설정
-  }
   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>
-        
-          {/* 강우유입수량 분석결과 */}
-          <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 className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
       </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>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={aplcnYms}
-                value={aplcnYm}
-                onSelectValue={(val) => {
-                  setAplcnYm(String(val));
-                }}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={rdiiAnlsInfos}
-                value={rainInfwtAnlsSn}
-                onSelectValue={(val) => {
-                  setRainInfwtAnlsSn(Number(val));
-                }}
-              />
-            </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}
-              />
-            </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}
-              />
+
+      <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-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={aplcnYms}
+                  value={aplcnYm}
+                  onSelectValue={handleAplcnYmChange}
+                />
+              </div>
+
+              <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-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={rdiiAnlsInfos}
+                  value={rainInfwtAnlsSn}
+                  onSelectValue={handleRdiiAnlsSnChange}
+                />
+              </div>
+
+              {renderInfoInput('오수전환율:', rdiiAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', rdiiAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', rdiiAnls?.atflInpNm ?? '')}
+              {renderInfoInput('강우 파일명:', rdiiAnls?.atflRainNm ?? '')}
+              {renderInfoInput('RTK계수 출처:', rdiiAnls?.srcNm ?? '')}
             </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 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>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+        </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>
+        </section>
+      </div>
+    </div>
+  );
 
   return (
     <UiModal
@@ -284,17 +341,17 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
-            max-w-none
-            max-h-none
-            overflow-visible
-            z-[50]
-          `}
+        w-[78vw]
+        max-w-none
+        min-w-[1100px]
+        min-h-[72vh]
+        overflow-visible
+        z-[50]
+      `}
       body={renderBody()}
-      noFooterYn = 'Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
-export default React.memo(RdiiChart);
+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); // 모달 열기
@@ -525,4 +636,4 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     </div>
   )
 }
-export default FeatureClickEventPopup;
+export default FeatureClickEventPopup;

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/st/.gitignore

@@ -39,4 +39,7 @@ next-env.d.ts
 
 .env*
 !.env.example
-*.md
+*.md
+
+# next-agents-md
+.next-docs/

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

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

apps/st/app/api/auth/logout/route.ts

@@ -1,17 +1,19 @@
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 import {
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-  REFRESH_TOKEN,
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    DEVICE_ID,
+    REFRESH_TOKEN,
 } from "@/shared/config";
 
 export async function POST() {
-  const cookieStore = await cookies();
-  cookieStore.delete(ACCESS_TOKEN);
-  cookieStore.delete(REFRESH_TOKEN);
-  cookieStore.delete(AUTH_USER_ID);
-  cookieStore.delete(CLAIM_NAME);
-  return NextResponse.json({ message: "Logged out" }, { status: 200 });
+    const cookieStore = await cookies();
+    cookieStore.delete(ACCESS_TOKEN);
+    cookieStore.delete(REFRESH_TOKEN);
+    cookieStore.delete(AUTH_USER_ID);
+    cookieStore.delete(CLAIM_NAME);
+    cookieStore.delete(DEVICE_ID);
+    return NextResponse.json({ message: "Logged out" }, { status: 200 });
 }

apps/st/app/api/proxy/[...url]/route.ts

@@ -1,104 +1,158 @@
 import {
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-  REFRESH_TOKEN,
-  SERVER_API_URL,
-  SITE_ID,
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    DEVICE_ID,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
 } from "@/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
 async function handler(
-  request: Request,
-  params: { url: string[] },
-  method: "GET" | "POST" | "PUT" | "DELETE",
+    request: Request,
+    params: { url: string[] },
+    method: "GET" | "POST" | "PUT" | "DELETE",
 ) {
-  const cookieStore = await cookies();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-Site-Id": SITE_ID,
-  };
-  let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
+    const cookieStore = await cookies();
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
+    };
+    let body = {};
 
-  // silent refresh
-  if (isRefreshHandler) {
-    const refreshToken = cookieStore.get(REFRESH_TOKEN);
-    headers[CLAIM_NAME] = refreshToken?.value ?? "";
+    const isRefreshHandler = params.url.includes("refresh");
+    const isLoginHandler = params.url.includes("login");
 
-    if (!headers[CLAIM_NAME]) {
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
-    }
-  }
+    // ── Silent Refresh ──────────────────────────────────────────────────────────
+    // HttpOnly 쿠키에서 refresh-token 꺼내 Authorization 헤더에 주입.
+    // 쿠키에 저장된 device-id도 X-Device-Id 헤더로 함께 전달한다.
+    // 백엔드: TokenProvider.refreshToken(token, request, response)
+    //   → userService.findByRefreshToken(refreshToken, deviceId)   (Redis Hash 검증)
+    //   → userService.updateRefreshToken(userUnqId, newToken, deviceId) (RTR 갱신)
+    if (isRefreshHandler) {
+        const refreshToken = cookieStore.get(REFRESH_TOKEN);
+        headers[CLAIM_NAME] = refreshToken?.value ?? "";
 
-  try {
-    if (!isRefreshHandler) {
-      body = await request.json();
+        if (!headers[CLAIM_NAME]) {
+            return NextResponse.json(
+                { message: "Can't refresh" },
+                { status: 401 },
+            );
+        }
+
+        // device-id 쿠키 → X-Device-Id 헤더 (Redis 다중 세션 식별)
+        const deviceId = cookieStore.get(DEVICE_ID);
+        if (deviceId?.value) {
+            headers["X-Device-Id"] = deviceId.value;
+        }
     }
 
-    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
-      method,
-      headers,
-      body: JSON.stringify(body),
-    });
-
-    if (!result.ok) {
-      return NextResponse.json(
-        { message: "Invalid Credentials" },
-        { status: 401 },
-      );
+    // ── Login ────────────────────────────────────────────────────────────────────
+    // 클라이언트(login-service.ts)가 fetch 헤더에 X-Device-Id 를 포함해서 전송한다.
+    // BFF는 해당 헤더를 그대로 백엔드로 포워딩한다.
+    // 백엔드: AuthenticationFilter.successfulAuthentication
+    //   → TokenProvider.createTokenAndAddHeader(request, ...)
+    //   → request.getHeader("X-Device-Id") 로 deviceId 추출
+    //   → userService.updateRefreshToken(userUnqId, refreshToken, deviceId)
+    //   → Redis Hash[user:sessions:{userUnqId}][deviceId] = refreshToken (TTL 1일)
+    if (isLoginHandler) {
+        const deviceId = request.headers.get("X-Device-Id");
+        if (deviceId) {
+            headers["X-Device-Id"] = deviceId;
+        }
     }
 
-    const accessToken = result.headers.get(ACCESS_TOKEN);
-    const refreshToken = result.headers.get(REFRESH_TOKEN);
-    const userId = result.headers.get(AUTH_USER_ID);
+    try {
+        if (!isRefreshHandler) {
+            body = await request.json();
+        }
 
-    if (accessToken && userId) {
-      const response = NextResponse.json({
-        [ACCESS_TOKEN]: accessToken,
-        [AUTH_USER_ID]: userId,
-      });
+        const result = await fetch(
+            `${SERVER_API_URL}/${params.url.join("/")}`,
+            {
+                method,
+                headers,
+                body: JSON.stringify(body),
+            },
+        );
 
-      
+        if (!result.ok) {
+            return NextResponse.json(
+                { message: "Invalid Credentials" },
+                { status: 401 },
+            );
+        }
 
-      if (refreshToken) {
-        cookieStore.set(REFRESH_TOKEN, refreshToken, {
-          httpOnly: true,
-          sameSite: "lax",
-//          domain: domain,
-          path: "/",
-        });
-      }
+        const accessToken = result.headers.get(ACCESS_TOKEN);
+        const refreshToken = result.headers.get(REFRESH_TOKEN);
+        const userId = result.headers.get(AUTH_USER_ID);
 
-      return response;
+        if (accessToken && userId) {
+            const response = NextResponse.json({
+                [ACCESS_TOKEN]: accessToken,
+                [AUTH_USER_ID]: userId,
+            });
+
+            const forwardedHost = request.headers.get("x-forwarded-host");
+            const host = request.headers.get("host");
+            const rawHost =
+                forwardedHost ||
+                host ||
+                new URL(request.url).hostname.toString();
+
+            // 포트 번호 제거 (예: "localhost:13000" → "localhost")
+            const hostname = rawHost.split(":")[0];
+
+            // 쿠키 domain 결정
+            // - localhost / 127.0.0.1: domain 미지정 (undefined) → 브라우저 기본 동작
+            // - 운영(hasuon.or.kr): 서브도메인 공유를 위해 최상위 도메인 앞에 점(.) 붙임
+            // - 그 외(IP, 기타 도메인): 현재 hostname 그대로 사용
+            const isLocal =
+                hostname === "localhost" || hostname === "127.0.0.1";
+            const domain = isLocal
+                ? undefined
+                : hostname.includes("hasuon.or.kr")
+                  ? ".hasuon.or.kr"
+                  : hostname;
+
+            if (refreshToken) {
+                cookieStore.set(REFRESH_TOKEN, refreshToken, {
+                    httpOnly: true,
+                    sameSite: "strict",
+                    ...(domain !== undefined && { domain }),
+                    path: "/",
+                });
+            }
+
+            return response;
+        }
+
+        return NextResponse.json(
+            { message: "Invalid Credentials" },
+            { status: 401 },
+        );
+    } catch (error) {
+        return NextResponse.json(
+            { message: "Server Error", error },
+            { status: 500 },
+        );
     }
-
-    return NextResponse.json(
-      { message: "Invalid Credentials" },
-      { status: 401 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Server Error", error },
-      { status: 500 },
-    );
-  }
 }
 
-
 export async function POST(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "POST");
+    const params = await props.params;
+    return handler(request, params, "POST");
 }
 
 export async function PUT(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "PUT");
+    const params = await props.params;
+    return handler(request, params, "PUT");
 }

apps/st/eslint.config.mjs

@@ -1,6 +1,7 @@
+import { FlatCompat } from "@eslint/eslintrc";
 import { dirname } from "path";
 import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import baseEsLintConfig from "../../eslint.config.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -11,6 +12,7 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
     ...compat.extends("next/core-web-vitals", "next/typescript"),
+    ...baseEsLintConfig,
     {
         rules: {
             "react-hooks/exhaustive-deps": "off",

apps/st/package.json

@@ -34,6 +34,7 @@
     "@types/xlsx": "^0.0.36",
     "axios": "^1.8.1",
     "chart.js": "^4.4.8",
+    "chartjs-plugin-zoom": "^2.2.0",
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
@@ -62,6 +63,7 @@
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/st/src/app/styles/components.css

@@ -1,4 +0,0 @@
-.card {
-    margin: 0.5rem !important;
-    padding: 0.5rem !important;
-}

apps/st/src/components/module/CompactDataGrid.tsx

@@ -67,7 +67,7 @@ const CompactDataGrid = ({
     fixedColumns,
     showHeaderCheckbox = false,
     rowData,
-    setRowData,
+    // setRowData,
     getGridDataRef,
     cellStyleCallback,
     onRowClick,

apps/st/src/components/module/DataGrid.tsx

@@ -1,24 +1,25 @@
-import { useRef, useEffect, useLayoutEffect } from "react";
-import { ValueType } from "realgrid";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
-import RealGrid, { GridFitStyle, type DisplayOptions } from "realgrid";
-import { RealGridReact, RGDataColumn } from "realgrid-react";
-import type {
-    DataGridProps,
-    RealGridColumnInfo,
-    GridViewWithSetColumns,
-    FooterItemWithCallback,
-    ColumnLayoutItem,
-    CellStyleCallback,
-    CellTooltipCallback,
-} from "../type/DataGrid.type";
-import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks";
 import JSZip from "jszip";
+import { ValueType } from "realgrid";
+import RealGrid, { type DisplayOptions, GridFitStyle } from "realgrid";
+import { RealGridReact, RGDataColumn } from "realgrid-react";
 import * as XLSX from "xlsx";
 
 import { useAlertStore } from "@/shared/lib";
-
 import { Button } from "@common/components";
+
+import type {
+    CellStyleCallback,
+    CellTooltipCallback,
+    ColumnLayoutItem,
+    DataGridProps,
+    FooterItemWithCallback,
+    GridViewWithSetColumns,
+    RealGridColumnInfo,
+} from "../type/DataGrid.type";
+
+import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks";
 import { useTabStore } from "@/store/tab-store";
 
 // RealGrid 타입 확장
@@ -321,19 +322,43 @@ const DataGrid = ({
     cellTooltipCallback,
     onRowClick,
     statusInfo,
+    highlightedRowId,
+    idFieldName = "id",
 }: DataGridProps) => {
     const { columns, columnLayout } = columnInfo;
     const gridRef = useRef<RealGridReact>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const sortDirRef = useRef<Record<string, "asc" | "desc" | "none">>({});
-    const originalRowsRef = useRef<Record<string, Record<string, string | number>[]>>({});
+    const originalRowsRef = useRef<
+        Record<string, Record<string, string | number>[]>
+    >({});
     const rowDataRef = useRef<Record<string, string | number>[]>(rowData);
-    const cellStyleCallbackRef = useRef<CellStyleCallback | undefined>(cellStyleCallback);
-    const cellTooltipCallbackRef = useRef<CellTooltipCallback | undefined>(cellTooltipCallback);
+    const cellStyleCallbackRef = useRef<CellStyleCallback | undefined>(
+        cellStyleCallback,
+    );
+    const cellTooltipCallbackRef = useRef<CellTooltipCallback | undefined>(
+        cellTooltipCallback,
+    );
     rowDataRef.current = rowData;
     cellStyleCallbackRef.current = cellStyleCallback;
     cellTooltipCallbackRef.current = cellTooltipCallback;
 
+    // highlightedRowId가 변경될 때 해당 행으로 스크롤 및 선택
+    useEffect(() => {
+        if (!gridRef.current?.gridView || highlightedRowId == null) return;
+
+        const gridView = gridRef.current.gridView;
+        const index = rowData.findIndex(
+            (row) => String(row[idFieldName]) === String(highlightedRowId),
+        );
+
+        if (index !== -1) {
+            // 해당 행으로 포커스 이동 및 스크롤
+            gridView.setCurrent({ itemIndex: index });
+            gridView.setFocus();
+        }
+    }, [highlightedRowId, rowData, idFieldName]);
+
     useLayoutEffect(() => {
         if (!cellStyleCallback || !gridRef.current?.gridView) return;
         gridRef.current.gridView.refresh();
@@ -532,10 +557,10 @@ const DataGrid = ({
                         ) {
                             const cell =
                                 worksheet[
-                                XLSX.utils.encode_cell({
-                                    r: rowIndex,
-                                    c: col,
-                                })
+                                    XLSX.utils.encode_cell({
+                                        r: rowIndex,
+                                        c: col,
+                                    })
                                 ];
                             if (
                                 cell &&
@@ -611,7 +636,7 @@ const DataGrid = ({
                             const col = range.s.c + colIndex;
                             const cell =
                                 worksheet[
-                                XLSX.utils.encode_cell({ r: row, c: col })
+                                    XLSX.utils.encode_cell({ r: row, c: col })
                                 ];
                             const headerName =
                                 headers[colIndex] || `Column${colIndex + 1}`;
@@ -909,7 +934,7 @@ const DataGrid = ({
                                         ) {
                                             (
                                                 column.footer[
-                                                index
+                                                    index
                                                 ] as FooterItemWithCallback
                                             ).valueCallback =
                                                 footerItem.valueCallback;
@@ -962,11 +987,11 @@ const DataGrid = ({
             getGridDataRef.current = () => {
                 const gv = gridRef.current?.gridView as
                     | {
-                        getDataSource?: () => {
-                            getRowCount(): number;
-                            getValue(r: number, f: string): unknown;
-                        };
-                    }
+                          getDataSource?: () => {
+                              getRowCount(): number;
+                              getValue(r: number, f: string): unknown;
+                          };
+                      }
                     | undefined;
                 if (!gv?.getDataSource) return [];
                 const ds = gv.getDataSource();
@@ -1001,23 +1026,57 @@ const DataGrid = ({
         if (!gridView || (!onRowClick && !cellTooltipCallback)) return;
 
         gridView.onCellClicked = (grid, clickData) => {
-            if (clickData.cellType !== "data" || clickData.itemIndex === undefined) return;
+            if (
+                clickData.cellType !== "data" ||
+                clickData.itemIndex === undefined
+            )
+                return;
             try {
                 const row = rowDataRef.current[clickData.itemIndex];
-                const cellIndex = (grid as { getCurrent?: () => { itemIndex: number; column?: string; fieldName?: string } }).getCurrent?.();
+                const cellIndex = (
+                    grid as {
+                        getCurrent?: () => {
+                            itemIndex: number;
+                            column?: string;
+                            fieldName?: string;
+                        };
+                    }
+                ).getCurrent?.();
                 // cellTooltipCallback 있으면 해당 셀 메시지로 showMessage (공식 문서: TooltipOptions + CellIndex)
                 if (cellTooltipCallbackRef.current && row && cellIndex) {
-                    const fieldName = cellIndex.fieldName ?? cellIndex.column ?? "";
-                    const msg = cellTooltipCallbackRef.current({ row: row as Record<string, string | number>, fieldName });
+                    const fieldName =
+                        cellIndex.fieldName ?? cellIndex.column ?? "";
+                    const msg = cellTooltipCallbackRef.current({
+                        row: row as Record<string, string | number>,
+                        fieldName,
+                    });
                     if (msg) {
-                        const colName = columns.find((c) => c.fieldName === fieldName || c.name === cellIndex.column)?.name ?? cellIndex.column ?? fieldName;
-                        (gridView as { showMessage?: (opts: { message: string; hideDuration?: number }, idx: { itemIndex: number; column: string }) => void }).showMessage?.(
+                        const colName =
+                            columns.find(
+                                (c) =>
+                                    c.fieldName === fieldName ||
+                                    c.name === cellIndex.column,
+                            )?.name ??
+                            cellIndex.column ??
+                            fieldName;
+                        (
+                            gridView as {
+                                showMessage?: (
+                                    opts: {
+                                        message: string;
+                                        hideDuration?: number;
+                                    },
+                                    idx: { itemIndex: number; column: string },
+                                ) => void;
+                            }
+                        ).showMessage?.(
                             { message: msg, hideDuration: 5000 },
-                            { itemIndex: cellIndex.itemIndex, column: colName }
+                            { itemIndex: cellIndex.itemIndex, column: colName },
                         );
                     }
                 }
-                if (onRowClick) onRowClick((row ?? {}) as Record<string, string | number>);
+                if (onRowClick)
+                    onRowClick((row ?? {}) as Record<string, string | number>);
             } catch (error) {
                 console.error("행 데이터 가져오기 오류:", error);
             }
@@ -1038,26 +1097,42 @@ const DataGrid = ({
                 onChange={handleFileChange}
             />
             <div className="flex items-center justify-end gap-[0.6rem] px-[1.2rem]">
-                {statusInfo &&
+                {statusInfo && (
                     <div className="data-grid-status-bubble flex flex-wrap items-center gap-x-4 gap-y-1">
-                        <span>진행상황: {
-                            statusInfo.laeSbmsnSttsCd === null || statusInfo.laeSbmsnSttsCd === '0' ?
-                                '미작성'
-                                :
-                                statusInfo.laeSbmsnSttsCd === '1' ? '작성중' : statusInfo.laeSbmsnSttsCd === '2' ? '제출'
-                                    :
-                                    statusInfo.laeSbmsnSttsCd === '3' ? '승인' : '반려'
-                        }
+                        <span>
+                            진행상황:{" "}
+                            {statusInfo.laeSbmsnSttsCd === null ||
+                            statusInfo.laeSbmsnSttsCd === "0"
+                                ? "미작성"
+                                : statusInfo.laeSbmsnSttsCd === "1"
+                                  ? "작성중"
+                                  : statusInfo.laeSbmsnSttsCd === "2"
+                                    ? "제출"
+                                    : statusInfo.laeSbmsnSttsCd === "3"
+                                      ? "승인"
+                                      : "반려"}
+                        </span>
+                        <span>
+                            제출일:{" "}
+                            {statusInfo.laeSbmsnYmd
+                                ? statusInfo.laeSbmsnYmd.length === 8 &&
+                                  /^\d{8}$/.test(statusInfo.laeSbmsnYmd)
+                                    ? `${statusInfo.laeSbmsnYmd.slice(0, 4)}-${statusInfo.laeSbmsnYmd.slice(4, 6)}-${statusInfo.laeSbmsnYmd.slice(6, 8)}`
+                                    : statusInfo.laeSbmsnYmd
+                                : "미제출"}
+                        </span>
+                        <span>
+                            담당자:{" "}
+                            {statusInfo.laePicNm ? statusInfo.laePicNm : "-"}
+                        </span>
+                        <span>
+                            연락처:{" "}
+                            {statusInfo.laePicTelNo
+                                ? statusInfo.laePicTelNo
+                                : "-"}
                         </span>
-                        <span>제출일: {statusInfo.laeSbmsnYmd
-                            ? (statusInfo.laeSbmsnYmd.length === 8 && /^\d{8}$/.test(statusInfo.laeSbmsnYmd)
-                                ? `${statusInfo.laeSbmsnYmd.slice(0, 4)}-${statusInfo.laeSbmsnYmd.slice(4, 6)}-${statusInfo.laeSbmsnYmd.slice(6, 8)}`
-                                : statusInfo.laeSbmsnYmd)
-                            : '미제출'}</span>
-                        <span>담당자: {statusInfo.laePicNm ? statusInfo.laePicNm : '-'}</span>
-                        <span>연락처: {statusInfo.laePicTelNo ? statusInfo.laePicTelNo : '-'}</span>
                     </div>
-                }
+                )}
                 {isExcelImport && (
                     <Button
                         className="h-[3.2rem] w-[96px] bg-gradient-green px-6 hover:bg-gradient-green-hover"
@@ -1087,12 +1162,36 @@ const DataGrid = ({
                     rows={rowData}
                     onInitialized={(grid) => {
                         if (!grid) return;
-                        (grid as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = createOnSortingHandler(columns, setRowData, sortDirRef, originalRowsRef);
-                        const dataProvider = gridRef.current?.dataProvider as unknown as
-                            | { setFields?(f: unknown[]): void; setRows?(r: Record<string, string | number>[]): void; getJsonRow?(r: number): Record<string, unknown> }
+                        (
+                            grid as {
+                                onSorting?: (
+                                    g: unknown,
+                                    f: unknown[],
+                                    d: unknown[],
+                                ) => boolean;
+                            }
+                        ).onSorting = createOnSortingHandler(
+                            columns,
+                            setRowData,
+                            sortDirRef,
+                            originalRowsRef,
+                        );
+                        const dataProvider = gridRef.current
+                            ?.dataProvider as unknown as
+                            | {
+                                  setFields?(f: unknown[]): void;
+                                  setRows?(
+                                      r: Record<string, string | number>[],
+                                  ): void;
+                                  getJsonRow?(
+                                      r: number,
+                                  ): Record<string, unknown>;
+                              }
                             | undefined;
                         if (dataProvider?.setFields) {
-                            dataProvider.setFields(buildFieldsFromColumns(columns));
+                            dataProvider.setFields(
+                                buildFieldsFromColumns(columns),
+                            );
                         }
                         if (dataProvider?.setRows && rowData?.length) {
                             dataProvider.setRows(rowData);
@@ -1104,33 +1203,101 @@ const DataGrid = ({
                             if (!gv?.columnByName) return;
                             // 공식 문서: 데이터 영역 툴팁 = renderer.showTooltip + onShowTooltip (displayOptions는 Ellipsis용이라 사용 안 함)
                             if (cellTooltipCallbackRef.current) {
-                                (gv as { onShowTooltip?: (grid: unknown, index: { itemIndex: number; column: string }, value: string) => string | undefined }).onShowTooltip = (_grid, index, value) => {
-                                    const row = rowDataRef.current[index?.itemIndex];
+                                (
+                                    gv as {
+                                        onShowTooltip?: (
+                                            grid: unknown,
+                                            index: {
+                                                itemIndex: number;
+                                                column: string;
+                                            },
+                                            value: string,
+                                        ) => string | undefined;
+                                    }
+                                ).onShowTooltip = (_grid, index, value) => {
+                                    const row =
+                                        rowDataRef.current[index?.itemIndex];
                                     if (row == null) return value;
                                     const column = index.column;
-                                    const col = columns.find((c) => c.name === column);
+                                    const col = columns.find(
+                                        (c) => c.name === column,
+                                    );
                                     const fieldName = col?.fieldName ?? column;
-                                    const custom = cellTooltipCallbackRef.current?.({ row: row as Record<string, string | number>, fieldName });
+                                    const custom =
+                                        cellTooltipCallbackRef.current?.({
+                                            row: row as Record<
+                                                string,
+                                                string | number
+                                            >,
+                                            fieldName,
+                                        });
                                     // verificationResult 등 메시지가 있을 때만 툴팁 표시 (없으면 undefined 반환 → 툴팁 안 띄움)
-                                    return custom && custom.length > 0 ? custom : undefined;
+                                    return custom && custom.length > 0
+                                        ? custom
+                                        : undefined;
                                 };
                             }
                             columns.forEach((column) => {
                                 const baseStyleName = column.styleName;
-                                const gridCol = gv.columnByName(column.name) as { styleCallback?: (g: unknown, dataCell: { itemIndex?: number; index?: { itemIndex?: number }; dataField?: string; fieldName?: string }) => string; renderer?: { showTooltip?: boolean } } | null;
+                                const gridCol = gv.columnByName(
+                                    column.name,
+                                ) as {
+                                    styleCallback?: (
+                                        g: unknown,
+                                        dataCell: {
+                                            itemIndex?: number;
+                                            index?: { itemIndex?: number };
+                                            dataField?: string;
+                                            fieldName?: string;
+                                        },
+                                    ) => string;
+                                    renderer?: { showTooltip?: boolean };
+                                } | null;
                                 if (gridCol) {
                                     if (cellTooltipCallbackRef.current) {
-                                        (gv as { setColumnProperty?: (col: string, key: string, value: unknown) => void }).setColumnProperty?.(column.name, 'renderer', { showTooltip: true });
+                                        (
+                                            gv as {
+                                                setColumnProperty?: (
+                                                    col: string,
+                                                    key: string,
+                                                    value: unknown,
+                                                ) => void;
+                                            }
+                                        ).setColumnProperty?.(
+                                            column.name,
+                                            "renderer",
+                                            { showTooltip: true },
+                                        );
                                     }
                                     gridCol.styleCallback = (_g, dataCell) => {
-                                        const itemIndex = dataCell?.index?.itemIndex ?? dataCell?.itemIndex ?? -1;
-                                        const fieldName = dataCell?.dataField ?? dataCell?.fieldName ?? column.fieldName;
+                                        const itemIndex =
+                                            dataCell?.index?.itemIndex ??
+                                            dataCell?.itemIndex ??
+                                            -1;
+                                        const fieldName =
+                                            dataCell?.dataField ??
+                                            dataCell?.fieldName ??
+                                            column.fieldName;
                                         const data = rowDataRef.current;
-                                        if (itemIndex < 0 || itemIndex >= data.length) return baseStyleName ?? '';
-                                        const row = data[itemIndex] as Record<string, string | number>;
-                                        const extra = cellStyleCallbackRef.current?.({ rowIndex: itemIndex, fieldName, row });
-                                        if (!extra) return baseStyleName ?? '';
-                                        return baseStyleName ? `${extra} ${baseStyleName}` : extra;
+                                        if (
+                                            itemIndex < 0 ||
+                                            itemIndex >= data.length
+                                        )
+                                            return baseStyleName ?? "";
+                                        const row = data[itemIndex] as Record<
+                                            string,
+                                            string | number
+                                        >;
+                                        const extra =
+                                            cellStyleCallbackRef.current?.({
+                                                rowIndex: itemIndex,
+                                                fieldName,
+                                                row,
+                                            });
+                                        if (!extra) return baseStyleName ?? "";
+                                        return baseStyleName
+                                            ? `${extra} ${baseStyleName}`
+                                            : extra;
                                     };
                                 }
                             });
@@ -1146,20 +1313,47 @@ const DataGrid = ({
                                 key={column.name}
                                 name={column.name}
                                 fieldName={column.fieldName}
-                                valueType={column.valueType ? column.valueType : ValueType.TEXT}
-                                {...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.000' })}
+                                valueType={
+                                    column.valueType
+                                        ? column.valueType
+                                        : ValueType.TEXT
+                                }
+                                {...(column.valueType === ValueType.NUMBER && {
+                                    numberFormat: column.dataFormat
+                                        ? column.dataFormat
+                                        : "#,##0.000",
+                                })}
                                 header={column.header}
                                 editable={column.editable}
-                                {...(column.width != null && { width: column.width })}
-                                {...(baseStyleName != null && { styleName: baseStyleName })}
-                                {...(column.visible === false && { visible: false })}
-                                {...(cellTooltipCallback && { renderer: { showTooltip: true } })}
-                                footer={column.footer && !Array.isArray(column.footer) ? {
-                                    text: column.footer.text,
-                                    expression: column.footer.expression,
-                                    numberFormat: column.footer.numberFormat,
-                                } : undefined}
-                                mergeRule={column.mergeCells ? { criteria: 'value' } : undefined}
+                                {...(column.width != null && {
+                                    width: column.width,
+                                })}
+                                {...(baseStyleName != null && {
+                                    styleName: baseStyleName,
+                                })}
+                                {...(column.visible === false && {
+                                    visible: false,
+                                })}
+                                {...(cellTooltipCallback && {
+                                    renderer: { showTooltip: true },
+                                })}
+                                footer={
+                                    column.footer &&
+                                    !Array.isArray(column.footer)
+                                        ? {
+                                              text: column.footer.text,
+                                              expression:
+                                                  column.footer.expression,
+                                              numberFormat:
+                                                  column.footer.numberFormat,
+                                          }
+                                        : undefined
+                                }
+                                mergeRule={
+                                    column.mergeCells
+                                        ? { criteria: "value" }
+                                        : undefined
+                                }
                                 sortable={!column.sortdisable}
                             />
                         );

apps/st/src/components/module/SearchForm.tsx

@@ -229,12 +229,12 @@ const SearchForm = (props: SearchFormProps = {}) => {
                     <div className="flex items-center p-2">
                         {mergedProps.fctName &&
                             <div className="flex items-center gap-2">
-                                <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+                                <Label htmlFor="fctNmSearchInput" className="mr-2 text-label">
                                     시설명
                                 </Label>
                                 <Input
                                     className="h-[3.2rem] w-[14rem] rounded-sm !text-[1.3rem] mr-4"
-                                    id="liSnSearchInput"
+                                    id="fctNmSearchInput"
                                     value={values.fctName}
                                     onChange={(e) => setValues({ ...values, fctName: e.target.value })}
                                     autoComplete="off"

apps/st/src/components/module/TabDataGrid.tsx

@@ -92,20 +92,20 @@ function toNum(v: unknown): number {
 //                 }
 //             }
 //         }
-        
+
 //         if (!gridEl) return;
-        
+
 //         columns.forEach((col) => {
 //             if (!col.fieldName && !col.name) return;
-            
+
 //             const fieldName = col.fieldName || col.name;
 //             const direction = sortDir[fieldName] || sortDir[col.name] || "none";
 //             if (direction === "none") return;
-            
+
 //             // 헤더 셀 찾기 (fieldName 또는 name으로)
 //             const headerCells = gridEl.querySelectorAll('.rg-header-cell, [class*="header"], .rg-header');
 //             let targetCell: HTMLElement | null = null;
-            
+
 //             headerCells.forEach((cell) => {
 //                 const el = cell as HTMLElement;
 //                 const text = el.textContent?.trim();
@@ -121,17 +121,17 @@ function toNum(v: unknown): number {
 //                     targetCell = el;
 //                 }
 //             });
-            
+
 //             if (!targetCell) return;
-            
+
 //             const headerCell = targetCell as HTMLElement;
-            
+
 //             // 기존 화살표 제거
 //             const existingIndicator = headerCell.querySelector(".rg-sort-indicator") as HTMLElement | null;
 //             if (existingIndicator) {
 //                 existingIndicator.remove();
 //             }
-            
+
 //             // 화살표 추가
 //             const indicator = document.createElement("span");
 //             indicator.className = "rg-sort-indicator";
@@ -164,7 +164,7 @@ function createOnSortingHandler(
     const groupField = mergeCellCol?.fieldName || null;
     const orderByField = 'displayYear'; // 고정값 또는 설정 가능하게 할 수 있음
     const hasMergeCells = mergeCellCols.length > 0;
-    
+
     return function onSorting(g: unknown, fields: unknown[], _directions: unknown[]) {
         const grid = g as { getColumn?: (i: number) => { fieldName?: string; name?: string } | undefined; getDataSource?: () => { getRowCount(): number; getValue(r: number, f: string): unknown } };
         const idx = fields?.[0];
@@ -178,10 +178,10 @@ function createOnSortingHandler(
         if (!sortField) return true;
         const col = columns.find((c) => (c.fieldName === sortField || c.name === sortField));
         if (!col || col.sortdisable) return true;
-        
+
         // mergeCells: true인 컬럼이 없으면 RealGrid 기본 정렬 사용
         if (!hasMergeCells || !groupField) return true;
-        
+
         const ds = grid.getDataSource?.();
         if (!ds) return true;
         const cnt = ds.getRowCount();
@@ -229,7 +229,7 @@ function sortRowsGroupPreserving(
         if (!groups.has(k)) groups.set(k, []);
         groups.get(k)!.push(r);
     }
-    
+
     // valueType에 따라 비교 함수 선택
     const compareValue = (val: unknown): number | string => {
         if (valueType === ValueType.NUMBER) {
@@ -238,7 +238,7 @@ function sortRowsGroupPreserving(
         // 텍스트나 기타 타입은 문자열로 비교
         return String(val ?? "");
     };
-    
+
     const rep = (arr: Record<string, string | number>[]): number | string => {
         const values = arr.map((r) => compareValue(r[sortField]));
         if (valueType === ValueType.NUMBER) {
@@ -253,7 +253,7 @@ function sortRowsGroupPreserving(
             return sortAsc ? (strs[0] as string) : (strs[strs.length - 1] as string);
         }
     };
-    
+
     const entries = [...groups.entries()].sort((a, b) => {
         const valA = rep(a[1]);
         const valB = rep(b[1]);
@@ -265,7 +265,7 @@ function sortRowsGroupPreserving(
         const strB = String(valB);
         return (sortAsc ? 1 : -1) * strA.localeCompare(strB);
     });
-    
+
     return entries.flatMap(([, arr]) => arr);
 }
 
@@ -306,9 +306,10 @@ function createNumberComparer(dp: RealGridDataProviderComparer): (field: string
     };
 }
 
-const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, rows = [], showHeaderCheckbox = false, rowDataMap, setRowDataMap, activeTab: activeTabProp, onActiveTabChange }: TabDataGridProps) => {
+const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, rows = [], showHeaderCheckbox = false, rowDataMap, setRowDataMap, activeTab: activeTabProp, onActiveTabChange, getGridDataRef }: TabDataGridProps) => {
     // 각 탭별로 그리드 ref와 데이터를 관리
     const gridRefs = useRef<Map<string, RealGridReact>>(new Map());
+    const activeTabRef = useRef<string>("");
     const fileInputRefs = useRef<Map<string, HTMLInputElement>>(new Map());
     // 각 탭별로 정렬 상태 관리
     const sortDirRefs = useRef<Map<string, React.MutableRefObject<Record<string, "asc" | "desc" | "none">>>>(new Map());
@@ -323,7 +324,8 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
     });
     const isControlled = activeTabProp !== undefined;
     const activeTab = isControlled ? activeTabProp : internalActiveTab;
-    const setActiveTab = isControlled ? (onActiveTabChange ?? (() => {})) : setInternalActiveTab;
+    const setActiveTab = isControlled ? (onActiveTabChange ?? (() => { })) : setInternalActiveTab;
+    activeTabRef.current = activeTab;
 
     const exportExcel = (tabKey: string) => {
         const currentRowData = rowDataMap.get(tabKey) || [];
@@ -345,7 +347,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
 
         const columnInfoItem = columnInfo.find(info => info.tabKey === tabKey);
         if (!columnInfoItem) return;
-        
+
         const tabLabel = columnInfoItem.tabLabel || tabKey;
         const columns = columnInfoItem.columns || [];
         const columnLayout = columnInfoItem.columnLayout || [];
@@ -520,7 +522,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                     const columns = columnInfoItem.columns || [];
                     headers.forEach((headerText, colIndex) => {
                         let fieldName: string | null = null;
-                        
+
                         // 헤더에 fieldName이 포함된 경우 (예: "합계 (swgeProcZoneInnerSm)")
                         const fieldNameMatch = headerText.match(/\(([a-zA-Z_][a-zA-Z0-9_]*)\)$/);
                         if (fieldNameMatch && fieldNameMatch[1]) {
@@ -529,13 +531,13 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                                 fieldName = extractedFieldName;
                             }
                         }
-                        
+
                         // 매칭 실패 시 원본 헤더 텍스트 사용
                         if (!fieldName) {
                             console.warn(`엑셀 컬럼 ${colIndex + 1} (헤더: "${headerText}") 매칭 실패 → 헤더 텍스트를 fieldName으로 사용`);
                             fieldName = headerText;
                         }
-                        
+
                         headerToFieldNameMap.set(headerText, fieldName);
                     });
 
@@ -656,6 +658,41 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
         });
     }, [rowDataMap, columnInfo]);
 
+    // getGridDataRef: 현재 활성 탭 그리드 데이터 반환 함수 할당
+    useEffect(() => {
+        if (!getGridDataRef) return;
+        getGridDataRef.current = () => {
+            const tabKey = activeTabRef.current;
+            const gridRef = gridRefs.current.get(tabKey);
+            const gv = gridRef?.gridView as
+                | {
+                    getDataSource?: () => {
+                        getRowCount(): number;
+                        getValue(r: number, f: string): unknown;
+                    };
+                }
+                | undefined;
+            if (!gv?.getDataSource) return [];
+            const ds = gv.getDataSource();
+            if (!ds) return [];
+            const currentInfo = columnInfo.find((info) => info.tabKey === tabKey);
+            const columns = currentInfo?.columns ?? [];
+            const fieldNames = columns
+                .map((c) => c.fieldName)
+                .filter((x): x is string => Boolean(x));
+            const cnt = ds.getRowCount();
+            const rows: Record<string, string | number>[] = [];
+            for (let i = 0; i < cnt; i++) {
+                const r: Record<string, string | number> = {};
+                for (const f of fieldNames) r[f] = ds.getValue(i, f) as string | number;
+                rows.push(r);
+            }
+            return rows;
+        };
+        return () => {
+            if (getGridDataRef) getGridDataRef.current = null;
+        };
+    }, [columnInfo, getGridDataRef]);
 
     // 탭 전환 시 그리드 레이아웃·푸터·포맷 재적용 (여러 시점 + ResizeObserver)
     const appliedTabRef = useRef<string | null>(null);
@@ -728,7 +765,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                                     if (item.valueCallback && footerArr[i])
                                         (footerArr[i] as FooterItemWithCallback).valueCallback = item.valueCallback;
                                 });
-                        } catch (_) {}
+                        } catch (_) { }
                     });
                 }
                 columns.forEach(col => {
@@ -738,7 +775,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                         const fo = col.footer as { valueCallback?: (g: unknown, col: unknown, fi: number, cf: unknown, v: unknown) => unknown };
                         if (column?.footer && fo.valueCallback)
                             (column.footer as { valueCallback?: typeof fo.valueCallback }).valueCallback = fo.valueCallback;
-                    } catch (_) {}
+                    } catch (_) { }
                 });
 
                 if (dp?.setRows && tabRowData.length) dp.setRows(tabRowData);
@@ -788,7 +825,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
 
                 {columnInfo.map((info) => {
                     const tabKey = info.tabKey;
-                    
+
                     // isSplitGrid가 true이고 left, right가 있으면 SplitDataGrid 사용
                     if (info.isSplitGrid && info.left && info.right) {
                         const leftRowData = rowDataMap.get(info.left.tabKey || `${tabKey}_left`) || [];
@@ -886,277 +923,277 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                                 </div>
                                 <div className="h-[60vh]" data-tab-key={tabKey}>
                                     {activeTab === tabKey ? (
-                                    <RealGridReact
-                                        key={tabKey}
-                                        ref={(el) => {
-                                            if (el) {
-                                                gridRefs.current.set(tabKey, el);
-                                                // 그리드가 생성된 직후 fitStyle 설정
-                                                if (el.gridView) {
-                                                    setTimeout(() => {
-                                                        const gridView = el.gridView;
-                                                        if (!gridView) return;
-
-                                                        const currentInfo = columnInfo.find(info => info.tabKey === tabKey);
-                                                        if (!currentInfo || !currentInfo.columns) return;
-                                                        
-                                                        const columns = currentInfo.columns;
-
-                                                        const dp = el.dataProvider as { setFields?: (fields: unknown[]) => void; setRows?: (rows: Record<string, string | number>[]) => void } | undefined;
-                                                        if (dp?.setFields) {
-                                                            dp.setFields(buildFieldsFromColumns(columns));
-                                                        }
-                                                        // setFields 호출 직후 행 데이터 적용 (realgrid-react의 setRows 타이밍 이슈 방지)
-                                                        const tabRowData = rowDataMap.get(tabKey) || [];
-                                                        if (dp?.setRows && tabRowData.length) {
-                                                            dp.setRows(tabRowData);
-                                                        }
-
-                                                        gridView.setDisplayOptions({
-                                                            fitStyle: GridFitStyle.EVEN
-                                                        });
-                                                        gridView.header.height = 60;
-
-                                                        // 헤더 체크박스 표시 여부 설정
-                                                        gridView.setOptions({
-                                                            checkBar: { visible: showHeaderCheckbox },
-                                                            rowIndicator: { visible: false },
-                                                        });
-
-                                                        // footer가 있는 컬럼이 있으면 footer 높이 설정
-                                                        const hasFooter = columns.some(col => col.footer);
-                                                        if (hasFooter) {
-                                                            // footer가 배열이거나 multiRow가 true인 footer가 있으면 멀티푸터 설정 (여러 행)
-                                                            const hasArrayFooter = columns.some(col => col.footer && Array.isArray(col.footer));
-                                                            const hasMultiRowFooter = columns.some(col => {
-                                                                const footer = col.footer;
-                                                                return footer && !Array.isArray(footer) && 'multiRow' in footer && footer.multiRow === true;
-                                                            });
-                                                            if (hasArrayFooter || hasMultiRowFooter) {
-                                                                // footer 배열의 길이를 확인하여 행 수 결정
-                                                                const arrayFooterLengths = columns
-                                                                    .filter(col => col.footer && Array.isArray(col.footer))
-                                                                    .map(col => (col.footer as unknown[]).length);
-                                                                const maxFooterLength = arrayFooterLengths.length > 0 
-                                                                    ? Math.max(...arrayFooterLengths)
-                                                                    : 2; // 기본값 2
-                                                                const footerHeights = Array.from({ length: maxFooterLength }, () => ({ height: 40 }));
-                                                                gridView.setFooters?.(footerHeights);
-                                                            } else {
-                                                                gridView.footer.height = 40;
-                                                            }
-                                                        }
-
-                                                        gridView.setOptions({
-                                                            summaryMode: "aggregate"
-                                                        });
-
-                                                        // footerUserSpans가 있는 경우 setColumnLayout으로 설정
-                                                        const checkFooterUserSpans = (layout: unknown[]): boolean => {
-                                                            return layout.some(item => {
-                                                                if (typeof item === 'string') return false;
-                                                                if (item && typeof item === 'object' && 'footerUserSpans' in item) return true;
-                                                                if (item && typeof item === 'object' && 'items' in item && Array.isArray(item.items)) {
-                                                                    return checkFooterUserSpans(item.items);
-                                                                }
-                                                                return false;
-                                                            });
-                                                        };
-                                                        
-                                                        if (checkFooterUserSpans(columnLayout)) {
-                                                            // setColumnLayout은 그리드가 완전히 렌더링된 후 호출해야 함
-                                                            setTimeout(() => {
-                                                                if (gridView && columnLayout) {
-                                                                    gridView.setColumnLayout?.(columnLayout);
-                                                                }
-                                                            }, 100);
-                                                        }
-
-                                                        // footer 설정 (배열 또는 단일 객체 모두 처리)
-                                                        // setFooters 호출 후 footer 배열 설정
+                                        <RealGridReact
+                                            key={tabKey}
+                                            ref={(el) => {
+                                                if (el) {
+                                                    gridRefs.current.set(tabKey, el);
+                                                    // 그리드가 생성된 직후 fitStyle 설정
+                                                    if (el.gridView) {
                                                         setTimeout(() => {
-                                                            const currentGridView = gridView;
-                                                            if (!currentGridView || !currentGridView.columnByName) {
-                                                                console.warn('GridView not available for footer setup');
-                                                                return;
+                                                            const gridView = el.gridView;
+                                                            if (!gridView) return;
+
+                                                            const currentInfo = columnInfo.find(info => info.tabKey === tabKey);
+                                                            if (!currentInfo || !currentInfo.columns) return;
+
+                                                            const columns = currentInfo.columns;
+
+                                                            const dp = el.dataProvider as { setFields?: (fields: unknown[]) => void; setRows?: (rows: Record<string, string | number>[]) => void } | undefined;
+                                                            if (dp?.setFields) {
+                                                                dp.setFields(buildFieldsFromColumns(columns));
                                                             }
-                                                            
-                                                            // footer가 배열인 컬럼이 있으면 setColumns를 다시 호출하여 footer 설정
-                                                            const hasArrayFooter = columns.some(col => col.footer && Array.isArray(col.footer));
-                                                            if (hasArrayFooter) {
-                                                                // 모든 컬럼 정보를 다시 가져와서 footer 배열을 포함하여 setColumns 호출
-                                                                const columnsWithFooter: RealGridColumnInfo[] = columns.map(col => {
-                                                                    const colInfo: RealGridColumnInfo = {
-                                                                        name: col.name,
-                                                                        fieldName: col.fieldName,
-                                                                        header: col.header,
-                                                                        editable: col.editable,
-                                                                        valueType: col.valueType,
-                                                                        dataFormat: col.dataFormat,
-                                                                        ...(col.styleName != null && { styleName: col.styleName }),
-                                                                        ...(col.mergeCells && { mergeRule: { criteria: col.mergeGroupField ? `values['${col.mergeGroupField}'] + value` : 'value' as const } }),
-                                                                    };
-                                                                    
-                                                                    if (col.footer) {
-                                                                        if (Array.isArray(col.footer)) {
-                                                                            colInfo.footer = col.footer;
-                                                                        } else {
-                                                                            colInfo.footer = {
-                                                                                text: col.footer.text,
-                                                                                expression: col.footer.expression,
-                                                                                numberFormat: col.footer.numberFormat,
-                                                                            };
-                                                                        }
-                                                                    }
-                                                                    
-                                                                    return colInfo;
+                                                            // setFields 호출 직후 행 데이터 적용 (realgrid-react의 setRows 타이밍 이슈 방지)
+                                                            const tabRowData = rowDataMap.get(tabKey) || [];
+                                                            if (dp?.setRows && tabRowData.length) {
+                                                                dp.setRows(tabRowData);
+                                                            }
+
+                                                            gridView.setDisplayOptions({
+                                                                fitStyle: GridFitStyle.EVEN
+                                                            });
+                                                            gridView.header.height = 60;
+
+                                                            // 헤더 체크박스 표시 여부 설정
+                                                            gridView.setOptions({
+                                                                checkBar: { visible: showHeaderCheckbox },
+                                                                rowIndicator: { visible: false },
+                                                            });
+
+                                                            // footer가 있는 컬럼이 있으면 footer 높이 설정
+                                                            const hasFooter = columns.some(col => col.footer);
+                                                            if (hasFooter) {
+                                                                // footer가 배열이거나 multiRow가 true인 footer가 있으면 멀티푸터 설정 (여러 행)
+                                                                const hasArrayFooter = columns.some(col => col.footer && Array.isArray(col.footer));
+                                                                const hasMultiRowFooter = columns.some(col => {
+                                                                    const footer = col.footer;
+                                                                    return footer && !Array.isArray(footer) && 'multiRow' in footer && footer.multiRow === true;
                                                                 });
-                                                                
-                                                                try {
-                                                                    (currentGridView as GridViewWithSetColumns).setColumns?.(columnsWithFooter);
-                                                                    
-                                                                    // setColumns 호출 후 footer 배열의 valueCallback을 다시 설정
-                                                                    setTimeout(() => {
-                                                                        columns.forEach(col => {
-                                                                            if (!col.footer || !Array.isArray(col.footer)) return;
-                                                                            
-                                                                            try {
-                                                                                const column = currentGridView.columnByName(col.name);
-                                                                                if (!column) return;
-                                                                                
-                                                                                // footer 배열의 각 요소에 valueCallback 설정
-                                                                                col.footer.forEach((footerItem, index) => {
-                                                                                    if (footerItem.valueCallback && column.footer) {
-                                                                                        // footer가 배열인 경우
-                                                                                        if (Array.isArray(column.footer) && column.footer[index]) {
-                                                                                            (column.footer[index] as FooterItemWithCallback).valueCallback = footerItem.valueCallback;
-                                                                                        }
-                                                                                    }
-                                                                                });
-                                                                            } catch (e) {
-                                                                                console.warn(`Error setting footer array valueCallback for column ${col.name}:`, e);
+                                                                if (hasArrayFooter || hasMultiRowFooter) {
+                                                                    // footer 배열의 길이를 확인하여 행 수 결정
+                                                                    const arrayFooterLengths = columns
+                                                                        .filter(col => col.footer && Array.isArray(col.footer))
+                                                                        .map(col => (col.footer as unknown[]).length);
+                                                                    const maxFooterLength = arrayFooterLengths.length > 0
+                                                                        ? Math.max(...arrayFooterLengths)
+                                                                        : 2; // 기본값 2
+                                                                    const footerHeights = Array.from({ length: maxFooterLength }, () => ({ height: 40 }));
+                                                                    gridView.setFooters?.(footerHeights);
+                                                                } else {
+                                                                    gridView.footer.height = 40;
+                                                                }
+                                                            }
+
+                                                            gridView.setOptions({
+                                                                summaryMode: "aggregate"
+                                                            });
+
+                                                            // footerUserSpans가 있는 경우 setColumnLayout으로 설정
+                                                            const checkFooterUserSpans = (layout: unknown[]): boolean => {
+                                                                return layout.some(item => {
+                                                                    if (typeof item === 'string') return false;
+                                                                    if (item && typeof item === 'object' && 'footerUserSpans' in item) return true;
+                                                                    if (item && typeof item === 'object' && 'items' in item && Array.isArray(item.items)) {
+                                                                        return checkFooterUserSpans(item.items);
+                                                                    }
+                                                                    return false;
+                                                                });
+                                                            };
+
+                                                            if (checkFooterUserSpans(columnLayout)) {
+                                                                // setColumnLayout은 그리드가 완전히 렌더링된 후 호출해야 함
+                                                                setTimeout(() => {
+                                                                    if (gridView && columnLayout) {
+                                                                        gridView.setColumnLayout?.(columnLayout);
+                                                                    }
+                                                                }, 100);
+                                                            }
+
+                                                            // footer 설정 (배열 또는 단일 객체 모두 처리)
+                                                            // setFooters 호출 후 footer 배열 설정
+                                                            setTimeout(() => {
+                                                                const currentGridView = gridView;
+                                                                if (!currentGridView || !currentGridView.columnByName) {
+                                                                    console.warn('GridView not available for footer setup');
+                                                                    return;
+                                                                }
+
+                                                                // footer가 배열인 컬럼이 있으면 setColumns를 다시 호출하여 footer 설정
+                                                                const hasArrayFooter = columns.some(col => col.footer && Array.isArray(col.footer));
+                                                                if (hasArrayFooter) {
+                                                                    // 모든 컬럼 정보를 다시 가져와서 footer 배열을 포함하여 setColumns 호출
+                                                                    const columnsWithFooter: RealGridColumnInfo[] = columns.map(col => {
+                                                                        const colInfo: RealGridColumnInfo = {
+                                                                            name: col.name,
+                                                                            fieldName: col.fieldName,
+                                                                            header: col.header,
+                                                                            editable: col.editable,
+                                                                            valueType: col.valueType,
+                                                                            dataFormat: col.dataFormat,
+                                                                            ...(col.styleName != null && { styleName: col.styleName }),
+                                                                            ...(col.mergeCells && { mergeRule: { criteria: col.mergeGroupField ? `values['${col.mergeGroupField}'] + value` : 'value' as const } }),
+                                                                        };
+
+                                                                        if (col.footer) {
+                                                                            if (Array.isArray(col.footer)) {
+                                                                                colInfo.footer = col.footer;
+                                                                            } else {
+                                                                                colInfo.footer = {
+                                                                                    text: col.footer.text,
+                                                                                    expression: col.footer.expression,
+                                                                                    numberFormat: col.footer.numberFormat,
+                                                                                };
                                                                             }
-                                                                        });
-                                                                    }, 50);
-                                                                } catch (e) {
-                                                                    console.warn('Failed to set columns with footer array:', e);
-                                                                }
-                                                            }
-                                                            
-                                                            // footer가 단일 객체이고 valueCallback이 있는 경우
-                                                            columns.forEach(col => {
-                                                                if (!col.footer || Array.isArray(col.footer)) return;
-                                                                
-                                                                try {
-                                                                    const column = currentGridView.columnByName(col.name);
-                                                                    if (!column || !column.footer) return;
-                                                                    
-                                                                    const footerObj = col.footer as { valueCallback?: (grid: unknown, column: unknown, footerIndex: number, columnFooter: unknown, value: unknown) => unknown };
-                                                                    if (footerObj.valueCallback) {
-                                                                        (column.footer as { valueCallback?: typeof footerObj.valueCallback }).valueCallback = footerObj.valueCallback;
-                                                                    }
-                                                                } catch (e) {
-                                                                    console.warn(`Error setting footer valueCallback for column ${col.name}:`, e);
-                                                                }
-                                                            });
-                                                        }, 200);
-
-                                                        // 고정 컬럼 설정
-                                                        if (currentInfo.fixedColumns !== undefined && currentInfo.fixedColumns > 0) {
-                                                            gridView.setFixedOptions({
-                                                                colCount: currentInfo.fixedColumns,
-                                                            });
-                                                        }
-
-                                                        // 각 탭별 ref 초기화
-                                                        if (!sortDirRefs.current.has(tabKey)) {
-                                                            sortDirRefs.current.set(tabKey, { current: {} });
-                                                        }
-                                                        if (!originalRowsRefs.current.has(tabKey)) {
-                                                            originalRowsRefs.current.set(tabKey, { current: {} });
-                                                        }
-                                                        
-                                                        const sortDirRef = sortDirRefs.current.get(tabKey)!;
-                                                        const originalRowsRef = originalRowsRefs.current.get(tabKey)!;
-                                                        
-                                                        // mergeCells: true인 컬럼이 있으면 onSorting에서 클라이언트 정렬로 처리
-                                                        const hasMergeCells = columns.some((col) => col.mergeCells === true);
-                                                        
-                                                        // setDataComparer로 숫자 정렬 (mergeCells가 있으면 onSorting에서 클라이언트 정렬로 처리)
-                                                        if (el.dataProvider) {
-                                                            const dp = el.dataProvider as RealGridDataProviderComparer;
-                                                            if (typeof dp.setDataComparer === "function" && typeof dp.getValue === "function") {
-                                                                const numberComparer = createNumberComparer(dp);
-                                                                const seen = new Set<string>();
-                                                                columns.forEach((col) => {
-                                                                    if (hasMergeCells) return; // mergeCells가 있으면 모든 컬럼을 클라이언트 정렬로 처리
-                                                                    if (col.valueType === ValueType.NUMBER && col.fieldName && !seen.has(col.fieldName)) {
-                                                                        seen.add(col.fieldName);
-                                                                        try {
-                                                                            dp.setDataComparer!(col.fieldName, numberComparer);
-                                                                        } catch (e) {
-                                                                            console.warn("setDataComparer:", e);
                                                                         }
+
+                                                                        return colInfo;
+                                                                    });
+
+                                                                    try {
+                                                                        (currentGridView as GridViewWithSetColumns).setColumns?.(columnsWithFooter);
+
+                                                                        // setColumns 호출 후 footer 배열의 valueCallback을 다시 설정
+                                                                        setTimeout(() => {
+                                                                            columns.forEach(col => {
+                                                                                if (!col.footer || !Array.isArray(col.footer)) return;
+
+                                                                                try {
+                                                                                    const column = currentGridView.columnByName(col.name);
+                                                                                    if (!column) return;
+
+                                                                                    // footer 배열의 각 요소에 valueCallback 설정
+                                                                                    col.footer.forEach((footerItem, index) => {
+                                                                                        if (footerItem.valueCallback && column.footer) {
+                                                                                            // footer가 배열인 경우
+                                                                                            if (Array.isArray(column.footer) && column.footer[index]) {
+                                                                                                (column.footer[index] as FooterItemWithCallback).valueCallback = footerItem.valueCallback;
+                                                                                            }
+                                                                                        }
+                                                                                    });
+                                                                                } catch (e) {
+                                                                                    console.warn(`Error setting footer array valueCallback for column ${col.name}:`, e);
+                                                                                }
+                                                                            });
+                                                                        }, 50);
+                                                                    } catch (e) {
+                                                                        console.warn('Failed to set columns with footer array:', e);
+                                                                    }
+                                                                }
+
+                                                                // footer가 단일 객체이고 valueCallback이 있는 경우
+                                                                columns.forEach(col => {
+                                                                    if (!col.footer || Array.isArray(col.footer)) return;
+
+                                                                    try {
+                                                                        const column = currentGridView.columnByName(col.name);
+                                                                        if (!column || !column.footer) return;
+
+                                                                        const footerObj = col.footer as { valueCallback?: (grid: unknown, column: unknown, footerIndex: number, columnFooter: unknown, value: unknown) => unknown };
+                                                                        if (footerObj.valueCallback) {
+                                                                            (column.footer as { valueCallback?: typeof footerObj.valueCallback }).valueCallback = footerObj.valueCallback;
+                                                                        }
+                                                                    } catch (e) {
+                                                                        console.warn(`Error setting footer valueCallback for column ${col.name}:`, e);
                                                                     }
                                                                 });
+                                                            }, 200);
+
+                                                            // 고정 컬럼 설정
+                                                            if (currentInfo.fixedColumns !== undefined && currentInfo.fixedColumns > 0) {
+                                                                gridView.setFixedOptions({
+                                                                    colCount: currentInfo.fixedColumns,
+                                                                });
                                                             }
-                                                        }
-                                                        
-                                                        // mergeCells: true인 컬럼이 있으면 onSorting에서 그룹 내 순서 유지 정렬 적용
-                                                        const setRowData = (updater: React.SetStateAction<Record<string, string | number>[]>) => {
-                                                            setRowDataMap(prev => {
-                                                                const newMap = new Map(prev);
-                                                                const currentData = newMap.get(tabKey) || [];
-                                                                const newData = typeof updater === 'function' ? updater(currentData) : updater;
-                                                                newMap.set(tabKey, newData);
-                                                                return newMap;
-                                                            });
-                                                        };
-                                                        
-                                                        // 그리드 DOM 요소 찾기 (나중에 화살표 업데이트에 사용)
-                                                        // 탭별로 그리드 요소를 찾기 위해 data-tab-key 사용
-                                                        const findGridElement = () => {
-                                                            const tabContent = document.querySelector(`[data-tab-key="${tabKey}"]`);
-                                                            return tabContent?.querySelector('.rg-grid, [data-grid-id]') as HTMLElement | null;
-                                                        };
-                                                        
-                                                        const onSortingHandler = createOnSortingHandler(columns, setRowData, sortDirRef, originalRowsRef, findGridElement);
-                                                        (gridView as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = onSortingHandler;
-                                                    }, 150);
+
+                                                            // 각 탭별 ref 초기화
+                                                            if (!sortDirRefs.current.has(tabKey)) {
+                                                                sortDirRefs.current.set(tabKey, { current: {} });
+                                                            }
+                                                            if (!originalRowsRefs.current.has(tabKey)) {
+                                                                originalRowsRefs.current.set(tabKey, { current: {} });
+                                                            }
+
+                                                            const sortDirRef = sortDirRefs.current.get(tabKey)!;
+                                                            const originalRowsRef = originalRowsRefs.current.get(tabKey)!;
+
+                                                            // mergeCells: true인 컬럼이 있으면 onSorting에서 클라이언트 정렬로 처리
+                                                            const hasMergeCells = columns.some((col) => col.mergeCells === true);
+
+                                                            // setDataComparer로 숫자 정렬 (mergeCells가 있으면 onSorting에서 클라이언트 정렬로 처리)
+                                                            if (el.dataProvider) {
+                                                                const dp = el.dataProvider as RealGridDataProviderComparer;
+                                                                if (typeof dp.setDataComparer === "function" && typeof dp.getValue === "function") {
+                                                                    const numberComparer = createNumberComparer(dp);
+                                                                    const seen = new Set<string>();
+                                                                    columns.forEach((col) => {
+                                                                        if (hasMergeCells) return; // mergeCells가 있으면 모든 컬럼을 클라이언트 정렬로 처리
+                                                                        if (col.valueType === ValueType.NUMBER && col.fieldName && !seen.has(col.fieldName)) {
+                                                                            seen.add(col.fieldName);
+                                                                            try {
+                                                                                dp.setDataComparer!(col.fieldName, numberComparer);
+                                                                            } catch (e) {
+                                                                                console.warn("setDataComparer:", e);
+                                                                            }
+                                                                        }
+                                                                    });
+                                                                }
+                                                            }
+
+                                                            // mergeCells: true인 컬럼이 있으면 onSorting에서 그룹 내 순서 유지 정렬 적용
+                                                            const setRowData = (updater: React.SetStateAction<Record<string, string | number>[]>) => {
+                                                                setRowDataMap(prev => {
+                                                                    const newMap = new Map(prev);
+                                                                    const currentData = newMap.get(tabKey) || [];
+                                                                    const newData = typeof updater === 'function' ? updater(currentData) : updater;
+                                                                    newMap.set(tabKey, newData);
+                                                                    return newMap;
+                                                                });
+                                                            };
+
+                                                            // 그리드 DOM 요소 찾기 (나중에 화살표 업데이트에 사용)
+                                                            // 탭별로 그리드 요소를 찾기 위해 data-tab-key 사용
+                                                            const findGridElement = () => {
+                                                                const tabContent = document.querySelector(`[data-tab-key="${tabKey}"]`);
+                                                                return tabContent?.querySelector('.rg-grid, [data-grid-id]') as HTMLElement | null;
+                                                            };
+
+                                                            const onSortingHandler = createOnSortingHandler(columns, setRowData, sortDirRef, originalRowsRef, findGridElement);
+                                                            (gridView as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = onSortingHandler;
+                                                        }, 150);
+                                                    }
+                                                } else {
+                                                    gridRefs.current.delete(tabKey);
                                                 }
-                                            } else {
-                                                gridRefs.current.delete(tabKey);
-                                            }
-                                        }}
-                                        autoGenerateField={true}
-                                        layout={columnLayout}
-                                        rows={currentRowData}
-                                    >
-                                        {columns.map((column) => (
-                                            <RGDataColumn
-                                                key={column.name}
-                                                name={column.name}
-                                                fieldName={column.fieldName}
-                                                valueType={column.valueType ? column.valueType : ValueType.TEXT}
-                                                {...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.00' })}
-                                                header={column.header}
-                                                editable={column.editable}
-                                                {...(column.styleName != null
-                                                    ? { styleName: column.styleName }
-                                                    : column.editable === false
-                                                        ? { styleName: 'rg-cell-readonly' as const }
-                                                        : {})}
-                                                {...(column.visible === false && { visible: false })}
-                                                footer={column.footer && !Array.isArray(column.footer) ? {
-                                                    text: (column.footer as { text?: string }).text,
-                                                    expression: (column.footer as { expression?: 'sum' | 'avg' | 'count' | 'max' | 'min' }).expression,
-                                                    numberFormat: (column.footer as { numberFormat?: string }).numberFormat,
-                                                } : undefined}
-                                                mergeRule={column.mergeCells ? { criteria: column.mergeGroupField ? `values['${column.mergeGroupField}'] + value` : 'value' } : undefined}
-                                                sortable={!column.sortdisable}
-                                            />
-                                        ))}
-                                    </RealGridReact>
+                                            }}
+                                            autoGenerateField={true}
+                                            layout={columnLayout}
+                                            rows={currentRowData}
+                                        >
+                                            {columns.map((column) => (
+                                                <RGDataColumn
+                                                    key={column.name}
+                                                    name={column.name}
+                                                    fieldName={column.fieldName}
+                                                    valueType={column.valueType ? column.valueType : ValueType.TEXT}
+                                                    {...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.00' })}
+                                                    header={column.header}
+                                                    editable={column.editable}
+                                                    {...(column.styleName != null
+                                                        ? { styleName: column.styleName }
+                                                        : column.editable === false
+                                                            ? { styleName: 'rg-cell-readonly' as const }
+                                                            : {})}
+                                                    {...(column.visible === false && { visible: false })}
+                                                    footer={column.footer && !Array.isArray(column.footer) ? {
+                                                        text: (column.footer as { text?: string }).text,
+                                                        expression: (column.footer as { expression?: 'sum' | 'avg' | 'count' | 'max' | 'min' }).expression,
+                                                        numberFormat: (column.footer as { numberFormat?: string }).numberFormat,
+                                                    } : undefined}
+                                                    mergeRule={column.mergeCells ? { criteria: column.mergeGroupField ? `values['${column.mergeGroupField}'] + value` : 'value' } : undefined}
+                                                    sortable={!column.sortdisable}
+                                                />
+                                            ))}
+                                        </RealGridReact>
                                     ) : null}
                                 </div>
                             </div>

apps/st/src/components/statistics/input/SewagePipeInp.tsx

@@ -1,31 +1,87 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 
 import SearchForm from "@/components/module/SearchForm";
-import { TabDataGrid } from '@rsone/components';
+import TabDataGrid from "@/components/module/TabDataGrid";
 import SubmitButton from "@/components/button/SumitButton";
 import SaveButton from "@/components/button/SaveButton";
 import LastYearDataButton from "@/components/button/LastYearDataButton";
 import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
 
-import { RegionalFactStatusInpColumn } from "@/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn";
-import { FactInstallStatusInpColumn } from "@/components/util/column/input/sewagePipe/FactInstallStatusInpColumn";
-import { PipeTypeStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn";
-import { PipeDiameterStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn";
-import { ManholeStatusInpColumn } from "@/components/util/column/input/sewagePipe/ManholeStatusInpColumn";
-import { ConnectionStatusInpColumn } from "@/components/util/column/input/sewagePipe/ConnectionStatusInpColumn";
+import { SewagePipeInpColumnInfoList } from "@/components/util/column/input/sewagePipe/SewagePipeInpColumn";
+import type { ColumnInfoList, ColumnConfig } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { useAlertStore } from "@/shared/lib";
+import { useAdminStore } from "@/store/admin-store";
 
-// 하수도 통계 관리 > 02. 하수관로 
+// 하수도 통계 관리 > 02. 하수관로
 const SewagePipeInp = () => {
-    
-    // tab List
-    const SewagePipeInpTapList = [
-        RegionalFactStatusInpColumn,
-        FactInstallStatusInpColumn,
-        PipeTypeStatusInpColumn,
-        PipeDiameterStatusInpColumn,
-        ManholeStatusInpColumn,
-        ConnectionStatusInpColumn,
-    ];
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [_isLoading, setIsLoading] = useState<boolean>(false);
+    const [activeTab, setActiveTab] = useState<string>(SewagePipeInpColumnInfoList[0]?.tabKey ?? "ST00020001");
+    const [isEnterable, _setIsEnterable] = useState<boolean>(true);
+    const { isAdminInfo } = useAdminStore();
+
+    const columnInfo = useMemo(() => {
+        const canEdit = isEnterable || isAdminInfo;
+        return SewagePipeInpColumnInfoList.map((tab: ColumnInfoList) => {
+            const applyEditable = (cols: ColumnConfig[] | undefined) =>
+                (cols ?? []).map((col: ColumnConfig) =>
+                    canEdit
+                        ? col
+                        : { ...col, editable: false as const, styleName: col.styleName ?? "rg-cell-readonly" }
+                );
+
+            if (tab.left && tab.right) {
+                return {
+                    ...tab,
+                    left: { ...tab.left, columns: applyEditable(tab.left.columns) },
+                    right: { ...tab.right, columns: applyEditable(tab.right.columns) },
+                };
+            }
+            return {
+                ...tab,
+                columns: applyEditable(tab.columns),
+            };
+        });
+    }, [isEnterable, isAdminInfo]);
+
+    // const handleSearch = async (values: SearchFormValues) => {
+    //     if (!values.sido || values.sido === 'ALL') {
+    //         alert('시도를 선택해주세요.');
+    //         return;
+    //     }
+
+    //     setActiveTab('ST00020001');
+
+    //     setRowDataMap(new Map());
+
+    //     try {
+    //         setIsLoading(true);
+
+    //         // const searchParam: SewagePipeReviewRequestParams = {
+    //         //     statsYr: values.year,
+    //         //     sewerBzmnCd: values.bsnmCd,
+    //         //     ctpvNm: values.sido,
+    //         //     sggNm: values.gugun === 'ALL' ? '' : values.gugun
+    //         // };
+
+    //         // searchParamRef.current = searchParam;
+    //         // const response = await statisticsManagementApi.getSewagePipeReviewRegionalList(searchParam);
+
+    //         // if (response?.status === 'success' && response.data) {
+    //         //     const newRowDataMap = new Map<string, Record<string, string | number>[]>();
+    //         //     newRowDataMap.set('ST00020001', toGridRows(response.data as object[]));
+    //         //     setRowDataMap(newRowDataMap);
+    //         // } else {
+    //         //     alert(response?.message || "데이터가 없습니다.");
+    //         // }
+    //     } catch {
+    //         alert('데이터 조회 중 오류가 발생했습니다.');
+    //     } finally {
+    //         setIsLoading(false);
+    //     }
+    // };
 
     const SubmitExceptionFunc = () => {
         console.log('submit exception');
@@ -47,7 +103,6 @@ const SewagePipeInp = () => {
         // 저장 로직
     };
 
-    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
 
     return (
         <>
@@ -60,10 +115,12 @@ const SewagePipeInp = () => {
                     <SaveButton saveFunc={saveFunc} />
                 </div>
             </div>
-            <TabDataGrid 
-                columnInfo={SewagePipeInpTapList} 
-                rowDataMap={rowDataMap} 
-                setRowDataMap={setRowDataMap} 
+            <TabDataGrid
+                columnInfo={columnInfo}
+                rowDataMap={rowDataMap}
+                setRowDataMap={setRowDataMap}
+                activeTab={activeTab}
+                onActiveTabChange={setActiveTab}
             />
         </>
     );

apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx

@@ -14,7 +14,13 @@ import SubmitDailog from "./SubmitDailog";
 
 import { useAlertStore } from "@/shared/lib";
 import { useAdminStore } from "@/store/admin-store";
-import { StatisticsInputSewSupplyRateApi } from "@/entities/statistics/api/statistics-input-sew-supply-rate-service";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/statistics-input-sew-supply-rate-service";
+import { statisticsAPi } from "@/entities/statistics/api/statistics-service";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { getFooterSummary } from "@/components/util/grid/footerSummary";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import type {
     SewerageSupplyRateItem,
@@ -24,14 +30,12 @@ import type {
     SewerageSupplyRateSaveRequest,
     SewerageSupplyRateStatusInfo,
 } from "@/entities/statistics/model/statistics-sewage-supply-rate-input-interface";
+import type { cancelSubmitRequest } from "@/entities/statistics/model/statistics-interface";
 import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
 import { SeweragePenetrationRateInpColumn } from "@/components/util/column/input/SeweragePenetrationRateInpColumn";
-import { toGridRows } from "@/components/util/grid/gridFunction";
-import { getFooterSummary } from "@/components/util/grid/footerSummary";
-import { getUserInfo } from "../../../../../../packages/common/components/src/api";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { doList } from "@/components/util/column/input/DoList";
 
+
 type GridRowWithVerification = Record<string, string | number> & {
     verificationResult?: SewerageSupplyRateVerificationResult;
 };
@@ -60,11 +64,12 @@ const SeweragePenetrationRateInp = () => {
     const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
     const [statusInfo, setStatusInfo] = useState<SewerageSupplyRateStatusInfo | null>(null);
     const [showDailog, setShowDailog] = useState<boolean>(false);
+    const [statsCd, setStatsCd] = useState<string>('');
+    const [footerFromApi, setFooterFromApi] = useState<{ sewerBzmnWholPpltnCnt?: number; sewerBzmnDomplWholPpltnCnt?: number; sewerBzmnFrgnrWholPpltnCnt?: number; sewerBzmnArea?: number } | null>(null);
     const { confirm } = useConfirm();
 
     const { isAdminInfo } = useAdminStore();
 
-    const [footerFromApi, setFooterFromApi] = useState<{ sewerBzmnWholPpltnCnt?: number; sewerBzmnDomplWholPpltnCnt?: number; sewerBzmnFrgnrWholPpltnCnt?: number; sewerBzmnArea?: number } | null>(null);
     const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
 
     const _footerFieldNames = ['sewerBzmnWholPpltnCnt', 'sewerBzmnDomplWholPpltnCnt', 'sewerBzmnFrgnrWholPpltnCnt', 'sewerBzmnArea'] as const;
@@ -103,7 +108,7 @@ const SeweragePenetrationRateInp = () => {
     const fetchSewerageSupplyRate = async (params: SewerageSupplyRateRequestParams, isEnterable: boolean) => {
         try {
             setIsLoading(true);
-            const response = await StatisticsInputSewSupplyRateApi.getSewerageSupplyRateList(params);
+            const response = await statisticsInputSewSupplyRateApi.getSewerageSupplyRateList(params);
             if (response.status === 'success' && response.data) {
                 const commonInfo = response.data.commonInfo;
                 const statusInfo = response.data.statusInfo;
@@ -121,7 +126,7 @@ const SeweragePenetrationRateInp = () => {
                     })
                 );
 
-                setStatusInfo(response.data.statusInfo);
+                setStatusInfo(statusInfo);
                 setFooterFromApi(
                     commonInfo
                         ? {
@@ -132,7 +137,7 @@ const SeweragePenetrationRateInp = () => {
                         }
                         : null
                 );
-
+                setStatsCd(commonInfo.statsCd);
                 if (statusInfo && statusInfo.laeSbmsnSttsCd) {
                     if (['2', '3'].includes(statusInfo.laeSbmsnSttsCd)) {
                         setIsEnterable(false);
@@ -163,7 +168,7 @@ const SeweragePenetrationRateInp = () => {
         }
 
         try {
-            const response = await StatisticsInputSewSupplyRateApi.checkInputPeriod(values.year || '');
+            const response = await statisticsInputSewSupplyRateApi.checkInputPeriod(values.year || '');
 
             if (response.status === 'success') {
                 const checkEnterable = response.data;
@@ -266,6 +271,7 @@ const SeweragePenetrationRateInp = () => {
             const requestData: SewerageSupplyRateSaveRequest = {
                 sewerBzmnCd: searchValues?.bsnmCd ?? '',
                 ctpvNm: searchValues?.sido ?? '',
+                sggNm: searchValues?.gugun ?? '',
                 statsYr: searchValues?.year ?? '',
                 userId: userInfo.userUnqId,
                 submitList: convertedData,
@@ -280,7 +286,7 @@ const SeweragePenetrationRateInp = () => {
                 laeIdfrTelNo: submitInfo.laeIdfrTelNo,
             };
 
-            const response = await StatisticsInputSewSupplyRateApi.submitSewerageSupplyRate(requestData);
+            const response = await statisticsInputSewSupplyRateApi.submitSewerageSupplyRate(requestData);
             if (response.status === 'success') {
                 await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), false);
                 alert('제출되었습니다.');
@@ -368,6 +374,7 @@ const SeweragePenetrationRateInp = () => {
                 const requestData: SewerageSupplyRateSaveRequest = {
                     sewerBzmnCd: searchValues?.bsnmCd ?? '', // 하수도 사업자 코드
                     ctpvNm: searchValues?.sido ?? '', // 시도
+                    sggNm: searchValues?.gugun ?? '',
                     statsYr: searchValues?.year ?? '', // 통계 연도
                     userId: userInfo.userUnqId, // 사용자
                     saveList: convertedData, // 저장 데이터
@@ -378,7 +385,7 @@ const SeweragePenetrationRateInp = () => {
                     requestData.superAdmin = 'superAdmin';
                 }
 
-                const response = await StatisticsInputSewSupplyRateApi.saveSewerageSupplyRate(requestData);
+                const response = await statisticsInputSewSupplyRateApi.saveSewerageSupplyRate(requestData);
 
                 if (response.status === 'success') {
                     fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
@@ -395,7 +402,36 @@ const SeweragePenetrationRateInp = () => {
             setIsLoading(false);
         }
     };
-    console.log(footerFromApi);
+
+    const cnacelSubmitFunc = async () => {
+        try {
+            if (await confirm('제출된 내용을 취소하시겠습니까?')) {
+
+                const userInfo = await getUserInfo();
+                
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: searchValues?.bsnmCd ?? '',
+                    ctpvNm: searchValues?.sido ?? '',
+                    sggNm: searchValues?.gugun ?? '',
+                    statsYr: searchValues?.year ?? '',
+                    userId: userInfo.userUnqId,
+                    statsCd: statsCd,
+                };
+
+                const response = await statisticsAPi.cancelSubmit(requestData);
+
+                if (response.status === 'success') {
+                    fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
+                    alert('제출 취소되었습니다.');
+                } else {
+                    alert(response.message ?? '제출 취소 중 오류가 발생했습니다.');
+                }
+            }
+        } catch {
+            alert('제출 취소 중 오류가 발생했습니다.');
+        }
+    };
+
     return (
         <>
             <div className="relative">
@@ -411,7 +447,7 @@ const SeweragePenetrationRateInp = () => {
                                     
                                 </>
                             )}
-                            {statusInfo?.laeSbmsnSttsCd === '2' && <CancelSubmitButton cnacelSubmitFunc={() => console.log('test')} />}
+                            {statusInfo?.laeSbmsnSttsCd === '2' && <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />}
                             {(isEnterable && (doList.includes(lastSearchedValues?.bsnmCd || '') ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== 'ALL') : true) || isAdminInfo) && <SaveButton saveFunc={saveFunc} />}
                         </div>
                     </div>

apps/st/src/components/statistics/input/StatsInputStatusInp.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import useSWR, { useSWRConfig } from "swr";
 
 import SearchForm from "@/components/module/SearchForm";
-// import { DataGrid } from "@rsone/components";
+import { useTabStore } from "@/store/tab-store";
 import DataGrid from "@/components/module/DataGrid";
 import ApproveButton from "@/components/button/ApproveButton";
 import RejectButton from "@/components/button/RejectButton";
@@ -13,45 +14,63 @@ import type { StatsInputStatusListRequestParams } from "@/entities/statistics/mo
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import { useAlertStore } from "@/shared/lib";
 import { toGridRows } from "@/components/util/grid/gridFunction";
+import type { StatsInputStatusListApiResponse } from "@/entities/statistics/model/statistics-input-status-interface";
+
+const getStatsInputStatusFetcher = async (key: [string, StatsInputStatusListRequestParams]): Promise<StatsInputStatusListApiResponse> => {
+    return StatisticsInputStatusApi.getStatisticsInputStatusList(key[1]);
+};
 
 // 하수도 통계 관리 > 00. 통계 입력 현황
 const StatsInputStatusInp = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const activeTabId = useTabStore((state) => state.activeTabId);
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [searchParams, setSearchParams] = useState<StatsInputStatusListRequestParams | null>(null);
 
-    const handleSearch = async (values: SearchFormValues) => {
-        if (values.sido === '' || values.sido === 'ALL') {
-            alert('시도를 선택해주세요.');
+    const swrKey = searchParams ? (["stats-input-status", searchParams] as const) : null;
+    const { mutate } = useSWRConfig();
+    const { isLoading } = useSWR<StatsInputStatusListApiResponse>(
+        swrKey,
+        getStatsInputStatusFetcher,
+        {
+            revalidateOnFocus: true,
+            onSuccess: (data) => {
+                if (data.status === "success" && data.data) {
+                    setRowData(toGridRows(data.data));
+                } else {
+                    alert(data.message ?? "조회에 실패했습니다.");
+                }
+            },
+            onError: () => {
+                alert("데이터 조회 중 오류가 발생했습니다.");
+                setRowData([]);
+            },
+        },
+    );
+
+    useEffect(() => {
+        if (activeTabId === 'StatsInputStatusInp' && swrKey) {
+            mutate(swrKey);
+        }
+    }, [activeTabId]);
+
+    const handleSearch = (values: SearchFormValues) => {
+        if (values.sido === "" || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
             return;
         }
-
-        const searchParam: StatsInputStatusListRequestParams = {
+        const params: StatsInputStatusListRequestParams = {
             ctpvNm: values.sido,
             sewerBzmnCd: values.bsnmCd,
-            sggNm: values.gugun === 'ALL' ? '' : values.gugun,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
             statsYr: values.year,
         };
-
-        try {
-            setIsLoading(true);
-
-            const response =  await StatisticsInputStatusApi.getStatisticsInputStatusList(searchParam);
-            console.log(response)
-            if (response.status === 'success' && response.data) {
-                setRowData(toGridRows(response.data));
-            } else {
-                alert(response.message);
-            }
-        } catch {
-            alert('데이터 조회 중 오류가 발생했습니다.');
-            setRowData([]);
-        } finally {
-            setIsLoading(false);
-        }
+        setSearchParams(params);
+        mutate(["stats-input-status", params]);
     };
 
     const handleReset = () => {
+        setSearchParams(null);
         setRowData([]);
     };
 

apps/st/src/components/statistics/input/SubmitDailog.tsx

@@ -155,7 +155,7 @@ const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialo
                             취소
                         </Button>
                         <Button type="submit" color="green">
-                            저장
+                            제출
                         </Button>
                     </DialogFooter>
                 </form>

apps/st/src/components/statistics/management/LogHistory.tsx

@@ -18,7 +18,6 @@ import DataGrid from '@/components/module/DataGrid';
 import { CodeSelect } from '@/entities/code';
 
 import { LogHistoryColumn } from '@/components/util/column/management/LogHistoryColumn';
-import { useAlertStore } from "@/shared/lib";
 // import { LwpoCodeApi } from "@/entities/code";
 
 // const getStateCdListFetcher = async () => {

apps/st/src/components/statistics/total/SeweragePenetrationRateTot.tsx

@@ -1,10 +1,9 @@
+import { useState } from "react";
+
+import { SeweragePentrationRateTotColumn } from "@/components/util/column/total/SeweragePentrationRateTotColumn";
+
 import SearchForm from "@/components/module/SearchForm";
 import DataGrid from "@/components/module/DataGrid";
-import SubmitButton from "@/components/button/SumitButton";
-import SaveButton from "@/components/button/SaveButton";
-import LastYearDataButton from "@/components/button/LastYearDataButton";
-import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
-import { useState } from "react";
 
 const SeweragePenetrationRateTot = () => {
     const columns = [
@@ -103,38 +102,12 @@ const SeweragePenetrationRateTot = () => {
         'rmk',
     ];
 
-    const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
-    };
-
-    const saveFunc = () => {
-        console.log('submit');
-        // 저장 로직
-    };
-
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
-    };
-
-    const SubmitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외 제출 로직
-    };
-
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
 
     return (
         <>
             <SearchForm />
-            <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                <SubmitButton submitFunc={submitFunc} />
-                <SaveButton saveFunc={saveFunc} />
-                <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-            </div>
-            <DataGrid columnInfo={{columns, columnLayout}} rowStartNum={2} isExcelImport={true} fixedColumns={1} rowData={rowData} setRowData={setRowData} />
+            <DataGrid columnInfo={SeweragePentrationRateTotColumn} rowStartNum={2} isExcelImport={false} fixedColumns={1} rowData={rowData} setRowData={setRowData} />
         </>
     );
 };

apps/st/src/components/statistics/verification/GeneralVerificationManagement.tsx

@@ -1,82 +1,198 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
-import { CodeSelect } from '@/entities/code';
+import { CodeSelectWithAll } from '@/entities/code';
 import {
     Button,
     Label,
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectValue,
+    SelectItem,
+    DataTable,
 } from "@common/components";
+import { LoadingWithAnimation } from '@common/components';
+import { NoData } from '@/shared/ui/no-data';
+import DetailComponent from './generalVerification/DetailComponent';
+import RegistDialog from './generalVerification/RegistDialog';
+
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { getGeneralVerificationColumns } from '@/components/util/column/management/GeneralVerificationColumn';
+import type { GeneralverificationList } from '@/entities/statistics/model/general-verification-interface';
+import { generalverificationApiService } from '@/entities/statistics/api/general-verification-service';
+
+import { useAlertStore } from '@/shared/lib';
+
 
 const GeneralVerificationManagement = () => {
-    const [statsCd, setStatsCd] = useState('');
+    const [searchValues, setSearchValues] = useState<{
+        statsCd: string;
+        useYn: string;
+        vrfcClsfCd: string;
+    }>({
+        statsCd: '',
+        useYn: '',
+        vrfcClsfCd: '',
+    });
+    const [vrfcMasterData, setVrfcMasterData] = useState<GeneralverificationList[]>([]);
+    const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [selectedVrfcRow, setSelectedVrfcRow] = useState<number | null>(null);
+    const [showRegistForm, setShowRegistForm] = useState<boolean>(false);
+
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const handleSearch = async () => {
+        try {
+            setIsLoading(true);
+
+            const params = Object.fromEntries(
+                Object.entries({
+                    trgtStatsCd: searchValues.statsCd,
+                    vrfcClsfCd: searchValues.vrfcClsfCd,
+                    useYn: searchValues.useYn,
+                }).filter(([, value]) => value !== '' && value !== 'ALL')
+            );
+
+            const response = await generalverificationApiService.getGeneralverificationList(params);
+
+            if (response.status === 'success') {
+                setVrfcMasterData(response.data);
+                setRowSelection({});
+                setSelectedVrfcRow(null);
+                setShowRegistForm(false);
+            } else {
+                alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            }
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const columns = useMemo(
+        () => getGeneralVerificationColumns(handleSearch),
+        [searchValues.statsCd, searchValues.vrfcClsfCd, searchValues.useYn],
+    );
+
+    const table = useReactTable({
+        data: vrfcMasterData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId: (row) => String(row.vrfcSn),
+        state: { rowSelection },
+        onRowSelectionChange: setRowSelection,
+    });
+
+    const handleVrfcMasterRowClick = async (row: GeneralverificationList) => {
+        setRowSelection({ [row.vrfcSn]: true });
+        setSelectedVrfcRow(row.vrfcSn);
+        setShowRegistForm(false);
+    };
+
+    const handleReset = () => {
+        setRowSelection({});
+        setSelectedVrfcRow(null);
+        handleSearch();
+        setShowRegistForm(false);
+    }
+
+    useEffect(() => {
+        handleSearch();
+    }, []);
 
     return (
-        <div className="relative">
+        <div className="h-full">
             <div className="card card-border">
-                <form>
-                    <div className="flex items-center gap-8 p-2">
-                        <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                통계항목
-                            </Label>
-                            <CodeSelect
-                                upCd="STITEM"
-                                value={statsCd}
-                                onValueChange={setStatsCd}
-                                placeholder="선택"
-                                className="w-[16rem]"
-                            />
+                <div className="flex items-center gap-8 p-2">
+                    <div className="flex items-center gap-2">
+                        <Label className="text-label">
+                            통계항목
+                        </Label>
+                        <CodeSelectWithAll
+                            upCd="STITEM"
+                            value={searchValues.statsCd}
+                            onValueChange={(value) => setSearchValues({ ...searchValues, statsCd: value })}
+                            placeholder="전체"
+                            className="w-[16rem]"
+                        />
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Label className="text-label">
+                            검증분류
+                        </Label>
+                        <Select value={searchValues.vrfcClsfCd} onValueChange={(value) => setSearchValues({ ...searchValues, vrfcClsfCd: value })}>
+                            <SelectTrigger className="w-[10rem]">
+                                <SelectValue placeholder="전체"></SelectValue>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="ALL">전체</SelectItem>
+                                <SelectItem value="DO_SI">도단위 검증</SelectItem>
+                                <SelectItem value="SI_GU">시단위 검증</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Label className="text-label">
+                            사용여부
+                        </Label>
+                        <Select value={searchValues.useYn} onValueChange={(value) => setSearchValues({ ...searchValues, useYn: value })}>
+                            <SelectTrigger className="w-[10rem]">
+                                <SelectValue placeholder="전체"></SelectValue>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="ALL">전체</SelectItem>
+                                <SelectItem value="Y">Y</SelectItem>
+                                <SelectItem value="N">N</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2 ml-auto">
+                        <Button color="green" className="h-[3.2rem] w-[96px]" type="button" onClick={handleReset}>
+                            초기화
+                        </Button>
+                        <Button className="h-[3.2rem] w-[96px]" type="button" onClick={handleSearch}>
+                            조회
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div className="card !my-0 flex flex-col !p-0">
+                <div className='flex items-center justify-end gap-[0.6rem] px-[1.2rem]'>
+                    <RegistDialog open={showRegistForm} onOpenChange={setShowRegistForm} onSuccess={handleSearch}>
+                        <Button className="h-[3.2rem] w-[96px]" type="button">
+                            등록
+                        </Button>
+                    </RegistDialog>
+                </div>
+                <div className="flex justify-center gap-5 !p-0 h-[65vh]">
+                    <div className="card card-border w-1/2 !mx-0 flex flex-col">
+                        <div className="card-header">
+                            <h3 className="text-2xl font-medium text-label">일반 검증 목록</h3>
                         </div>
-                        <div className="flex items-center gap-2 ml-auto">
-                            <Button color="green" className="h-[3.2rem] w-[96px]" type="button">
-                                초기화
-                            </Button>
-                            <Button className="h-[3.2rem] w-[96px]" type="submit">
-                                조회
-                            </Button>
+                        <div className="card !m-4 h-full overflow-auto !p-0">
+                            {isLoading && (
+                                <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center">
+                                    <div className="relative size-[5rem]">
+                                        <LoadingWithAnimation color="primary" />
+                                    </div>
+                                </div>
+                            )}
+                            {isLoading ? null
+                                :
+                                vrfcMasterData.length > 0 ?
+                                    <DataTable table={table} onRowClick={(value) => handleVrfcMasterRowClick(value)} />
+                                    :
+                                    <div className="flex h-full items-center justify-center">
+                                        <NoData />
+                                    </div>
+                            }
                         </div>
                     </div>
-                </form>
-            </div>
-            <div className='card !mb-0 flex gap-5 !p-0'>
-                <div className='card card-border w-1/2 !mx-0 flex flex-col'>
-                    <Table variant="default">
-                        <TableRow>
-                            <TableHead>No</TableHead>
-                            <TableHead>검증항목</TableHead>
-                            <TableHead>등록자</TableHead>
-                            <TableHead>등록일</TableHead>
-                            <TableHead>사용여부</TableHead>
-                        </TableRow>
-                        <TableBody className='text-center'>
-                            <TableRow>
-                                <TableCell>
-                                    1
-                                </TableCell>
-                                <TableCell>
-                                    인구수검증
-                                </TableCell>
-                                <TableCell>
-                                    관리자
-                                </TableCell>
-                                <TableCell>
-                                    2026-02-09
-                                </TableCell>
-                                <TableCell>
-                                    Y
-                                </TableCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </div>
-                <div className='w-1/2'>
-
+                    <DetailComponent selectedVrfcRow={selectedVrfcRow} />
                 </div>
             </div>
         </div>

apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx

@@ -1,18 +1,37 @@
 "use client";
 
-import dayjs from "dayjs";
 import { useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
+
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
     getCoreRowModel,
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
+import type { AxiosError } from "axios";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib";
+import type { ApiErrorResponse } from "@/shared/model";
+import { CodeSelect } from "@/entities/code";
+import type {
+    AnalysisRequestPayload,
+    AnalysisResponseDto,
+    StAnlsMstResponse,
+    StAnlsMstSearchParams,
+    StAnlsOutlierListResponse,
+} from "@/entities/statistics";
+import { verificationHistoryColumns } from "@/entities/statistics";
+import { analysisApi } from "@/entities/statistics/api/analysis-api";
+import { stAnlsMstApi } from "@/entities/statistics/api/statistics-analysis-master-api";
+import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
+import type { VerificationTargetCodeResponse } from "@/entities/statistics/model/verification-target-management-interface";
 import {
     Button,
     Checkbox,
     DataTable,
+    DateRangePicker,
     Dialog,
     DialogContent,
     DialogHeader,
@@ -29,32 +48,16 @@ import {
     SelectValue,
     Table,
     TableBody,
+    TableCell,
     TableHead,
     TableHeader,
     TableRow,
-    TableCell,
-    DateRangePicker,
 } from "@common/components";
-import { verificationHistoryColumns } from "@/entities/statistics/model/verification-history-columns";
-import { analysisApi } from "@/entities/statistics/api/analysis-api";
-import { analysisHistoryApi } from "@/entities/statistics/api/analysis-history-api";
-import type {
-    AnalysisRequestPayload,
-    AnalysisResponseDto,
-} from "@/entities/statistics/model/analysis-interface";
-import type {
-    StAnlsMstResponse,
-    StAnlsMstSearchParams,
-    StAnlsOutlierListResponse,
-} from "@/entities/statistics/model/analysis-history-interface";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
-import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
-import type { VerificationTargetCodeResponse } from "@/entities/statistics/model/verification-target-management-interface";
-import { CodeSelect } from "@/entities/code";
+
+import HbVerificationDetail from "./detail/HbVerificationDetail";
 
 type DateRangeValue = {
-    from?: Date;
+    from: Date;
     to?: Date;
 };
 
@@ -95,7 +98,6 @@ function toNumber(value: string): number {
 }
 
 const HbStatisticsVerification = () => {
-    const router = useRouter();
     const { setMessage: alert } = useAlertStore((state) => state);
     const queryClient = useQueryClient();
 
@@ -119,6 +121,7 @@ const HbStatisticsVerification = () => {
         anlsSn: null,
     });
     const [selectedStatsCd, setSelectedStatsCd] = useState<string>("");
+    const [selectedAnlsSn, setSelectedAnlsSn] = useState<number | null>(null);
 
     const defaultHistoryDateRange = useMemo(
         () => getDefaultHistoryDateRange(),
@@ -160,8 +163,16 @@ const HbStatisticsVerification = () => {
         [filteredVerificationTargetCodes],
     );
 
+    const isAllSelected = useMemo(() => {
+        const count = filteredVerificationTargetCodes?.length ?? 0;
+        return count > 0 && selectedTargets.length === count;
+    }, [filteredVerificationTargetCodes, selectedTargets]);
+
+    const handleToggleAll = () => {
+        setSelectedTargets(isAllSelected ? [] : allVerificationTargetIds);
+    };
+
     useEffect(() => {
-        if (!allVerificationTargetIds.length) return;
         setSelectedTargets(allVerificationTargetIds);
     }, [allVerificationTargetIds]);
 
@@ -175,6 +186,8 @@ const HbStatisticsVerification = () => {
             const params: StAnlsMstSearchParams = {
                 page: historyPagination.pageIndex,
                 size: historyPagination.pageSize,
+                sort: "anlsSn,desc",
+                vrfcMthdCd: "HB",
             };
 
             if (appliedHistoryDateRange?.from) {
@@ -189,7 +202,7 @@ const HbStatisticsVerification = () => {
                 params.verifyDtEnd = dayjs(to).format("YYYY-MM-DD");
             }
 
-            return analysisHistoryApi.getAnalysisHistoryList(params);
+            return stAnlsMstApi.getAnalysisHistoryList(params);
         },
         refetchInterval: (query) => {
             const data = query.state.data;
@@ -201,8 +214,7 @@ const HbStatisticsVerification = () => {
         },
     });
 
-    const historyRowData: StAnlsMstResponse[] = (analysisHistory?.content ??
-        []) as StAnlsMstResponse[];
+    const historyRowData: StAnlsMstResponse[] = analysisHistory?.content ?? [];
 
     const table = useReactTable({
         data: historyRowData,
@@ -214,11 +226,7 @@ const HbStatisticsVerification = () => {
         state: {
             pagination: historyPagination,
         },
-        onPaginationChange: (updater) => {
-            setHistoryPagination((prev) =>
-                typeof updater === "function" ? updater(prev) : updater,
-            );
-        },
+        onPaginationChange: setHistoryPagination,
         meta: {
             onOutlierCellClick: (row: StAnlsMstResponse) => {
                 setOutlierDialog({ open: true, anlsSn: row.anlsSn });
@@ -234,7 +242,7 @@ const HbStatisticsVerification = () => {
         ],
         queryFn: async () => {
             if (!outlierDialog.anlsSn) return [];
-            const response = await analysisHistoryApi.getOutlierList(
+            const response = await stAnlsMstApi.getOutlierList(
                 outlierDialog.anlsSn,
             );
             return response;
@@ -244,7 +252,7 @@ const HbStatisticsVerification = () => {
 
     const analysisMutation = useMutation<
         AnalysisResponseDto,
-        Error,
+        AxiosError<ApiErrorResponse>,
         AnalysisRequestPayload
     >({
         mutationFn: async (payload) => analysisApi.analyze(payload),
@@ -254,8 +262,11 @@ const HbStatisticsVerification = () => {
                 queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST],
             });
         },
-        onError: () => {
-            alert("검증 실행 중 오류가 발생했습니다.");
+        onError: (error) => {
+            alert(
+                error.response?.data?.message ??
+                    "검증 실행 중 오류가 발생했습니다.",
+            );
         },
     });
 
@@ -325,7 +336,7 @@ const HbStatisticsVerification = () => {
     function handleHistoryRowClick(row: StAnlsMstResponse) {
         const anlsSn = Number(row.anlsSn ?? 0);
         if (!anlsSn) return;
-        router.push(`/statistics/verification/${anlsSn}`);
+        setSelectedAnlsSn(anlsSn);
     }
 
     function applyHistoryDateSearch(nextRange: DateRangeValue | undefined) {
@@ -352,264 +363,316 @@ const HbStatisticsVerification = () => {
 
     return (
         <>
-            <div className="card card-border flex flex-col gap-6">
-                {/* 검증 종류 선택 */}
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-6">
-                        <div className="flex items-center gap-4 pl-2">
-                            <Label className="text-[1.3rem] font-medium text-label">
-                                검증 년도
-                            </Label>
-                            <Select
-                                value={formState.verificationYear}
-                                onValueChange={(value) =>
-                                    handleFormChange("verificationYear", value)
-                                }
-                            >
-                                <SelectTrigger className="w-[10rem] flex-1">
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {yearOptions.map((year) => (
-                                        <SelectItem key={year} value={year}>
-                                            {year}년
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
-                        <div className="flex items-center gap-4 pl-2">
-                            <Label className="text-[1.3rem] font-medium text-label">
-                                검증 방식
-                            </Label>
-                            <RadioGroup
-                                value={verifyType}
-                                onValueChange={(value) =>
-                                    setVerifyType(value as VerifyType)
-                                }
-                                className="flex items-center gap-4"
-                            >
-                                <label className="flex cursor-pointer items-center gap-2 text-label">
-                                    <RadioGroupItem value="ALL" />
-                                    <span>일괄 검증</span>
-                                </label>
-                                <label className="flex cursor-pointer items-center gap-2 text-label">
-                                    <RadioGroupItem value="SELECT" />
-                                    <span>선택 검증</span>
-                                </label>
-                            </RadioGroup>
-                        </div>
-                    </div>
-                    <div className="flex gap-2">
-                        <Button
-                            color="green"
-                            className="h-[3.6rem] w-[120px]"
-                            onClick={handleSubmit}
-                            disabled={analysisMutation.isPending}
-                        >
-                            검증 실행
-                        </Button>
-                        <Button
-                            color="gray"
-                            className="h-[3.6rem] w-[120px]"
-                            type="button"
-                            onClick={handleReset}
-                        >
-                            초기화
-                        </Button>
-                    </div>
-                </div>
-                {/* //검증 종류 선택 */}
-
-                {verifyType === "SELECT" && (
-                    <div className="flex gap-4">
-                        {/* 검증 대상 */}
-                        <div className="flex-1">
-                            <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
-                                검증 대상
-                            </h4>
-                            <div className="mb-3 flex items-center gap-4 px-4">
-                                <Label className="text-[1.3rem] font-medium text-label">
-                                    통계항목
-                                </Label>
-                                <CodeSelect
-                                    upCd="STITEM"
-                                    onValueChange={setSelectedStatsCd}
-                                    className="w-[24rem]"
-                                />
+            {selectedAnlsSn ? (
+                <HbVerificationDetail
+                    anlsSn={selectedAnlsSn}
+                    onBack={() => setSelectedAnlsSn(null)}
+                />
+            ) : (
+                <>
+                    <div className="card card-border flex flex-col gap-6">
+                        {/* 검증 종류 선택 */}
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-6">
+                                <div className="flex items-center gap-4 pl-2">
+                                    <Label className="text-[1.3rem] font-medium text-label">
+                                        검증 년도
+                                    </Label>
+                                    <Select
+                                        value={formState.verificationYear}
+                                        onValueChange={(value) =>
+                                            handleFormChange(
+                                                "verificationYear",
+                                                value,
+                                            )
+                                        }
+                                    >
+                                        <SelectTrigger className="w-[10rem] flex-1">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {yearOptions.map((year) => (
+                                                <SelectItem
+                                                    key={year}
+                                                    value={year}
+                                                >
+                                                    {year}년
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="flex items-center gap-4 pl-2">
+                                    <Label className="text-[1.3rem] font-medium text-label">
+                                        검증 방식
+                                    </Label>
+                                    <RadioGroup
+                                        value={verifyType}
+                                        onValueChange={(value) =>
+                                            setVerifyType(value as VerifyType)
+                                        }
+                                        className="flex items-center gap-4"
+                                    >
+                                        <label className="flex cursor-pointer items-center gap-2 text-label">
+                                            <RadioGroupItem value="ALL" />
+                                            <span>일괄 검증</span>
+                                        </label>
+                                        <label className="flex cursor-pointer items-center gap-2 text-label">
+                                            <RadioGroupItem value="SELECT" />
+                                            <span>선택 검증</span>
+                                        </label>
+                                    </RadioGroup>
+                                </div>
+                            </div>
+                            <div className="flex gap-2">
+                                <Button
+                                    color="green"
+                                    className="h-[3.6rem] w-[120px]"
+                                    onClick={handleSubmit}
+                                    disabled={analysisMutation.isPending}
+                                >
+                                    검증 실행
+                                </Button>
                                 <Button
-                                    type="button"
                                     color="gray"
-                                    className="h-[3.2rem] px-4 text-[1.3rem]"
-                                    onClick={() => setSelectedStatsCd("")}
+                                    className="h-[3.6rem] w-[120px]"
+                                    type="button"
+                                    onClick={handleReset}
                                 >
                                     초기화
                                 </Button>
                             </div>
-                            <div className="max-h-[16rem] space-y-4 overflow-auto rounded-md border p-4">
-                                {verifyType === "SELECT" &&
-                                filteredVerificationTargetCodes &&
-                                filteredVerificationTargetCodes.length > 0 ? (
-                                    <div className="grid grid-cols-3 gap-4">
-                                        {filteredVerificationTargetCodes.map(
-                                            (item) => (
-                                                <div
-                                                    key={item.vrfcTrgtSn}
-                                                    className="flex items-center gap-2"
-                                                >
+                        </div>
+                        {/* //검증 종류 선택 */}
+
+                        {verifyType === "SELECT" && (
+                            <div className="flex gap-4">
+                                {/* 검증 대상 */}
+                                <div className="flex-1">
+                                    <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
+                                        검증 대상
+                                    </h4>
+                                    <div className="mb-3 flex items-center gap-4 px-4">
+                                        <Label className="text-[1.3rem] font-medium text-label">
+                                            통계항목
+                                        </Label>
+                                        <CodeSelect
+                                            upCd="STITEM"
+                                            value={selectedStatsCd}
+                                            onValueChange={setSelectedStatsCd}
+                                            className="w-[24rem]"
+                                        />
+                                        <Button
+                                            type="button"
+                                            color="gray"
+                                            className="h-[3.2rem] px-4 text-[1.3rem]"
+                                            onClick={() =>
+                                                setSelectedStatsCd("")
+                                            }
+                                        >
+                                            초기화
+                                        </Button>
+                                    </div>
+                                    <div className="max-h-[16rem] space-y-4 overflow-auto rounded-md border p-4">
+                                        {verifyType === "SELECT" &&
+                                        filteredVerificationTargetCodes &&
+                                        filteredVerificationTargetCodes.length >
+                                            0 ? (
+                                            <>
+                                                <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        id={item.vrfcTrgtSn}
-                                                        checked={selectedTargets.includes(
-                                                            item.vrfcTrgtSn,
-                                                        )}
-                                                        onCheckedChange={() =>
-                                                            handleTargetToggle(
-                                                                item.vrfcTrgtSn,
-                                                            )
+                                                        id="select-all-targets"
+                                                        checked={isAllSelected}
+                                                        onCheckedChange={
+                                                            handleToggleAll
                                                         }
                                                     />
                                                     <Label
-                                                        htmlFor={
-                                                            item.vrfcTrgtSn
-                                                        }
-                                                        className="cursor-pointer text-label"
+                                                        htmlFor="select-all-targets"
+                                                        className="cursor-pointer !font-bold"
                                                     >
-                                                        {item.vrfcTrgtNm}
+                                                        전체 선택
                                                     </Label>
                                                 </div>
-                                            ),
+                                                <div className="grid grid-cols-3 gap-4">
+                                                    {filteredVerificationTargetCodes.map(
+                                                        (item) => (
+                                                            <div
+                                                                key={
+                                                                    item.vrfcTrgtSn
+                                                                }
+                                                                className="flex items-center gap-2"
+                                                            >
+                                                                <Checkbox
+                                                                    id={
+                                                                        item.vrfcTrgtSn
+                                                                    }
+                                                                    checked={selectedTargets.includes(
+                                                                        item.vrfcTrgtSn,
+                                                                    )}
+                                                                    onCheckedChange={() =>
+                                                                        handleTargetToggle(
+                                                                            item.vrfcTrgtSn,
+                                                                        )
+                                                                    }
+                                                                />
+                                                                <Label
+                                                                    htmlFor={
+                                                                        item.vrfcTrgtSn
+                                                                    }
+                                                                    className="cursor-pointer text-label"
+                                                                >
+                                                                    {
+                                                                        item.vrfcTrgtNm
+                                                                    }
+                                                                </Label>
+                                                            </div>
+                                                        ),
+                                                    )}
+                                                </div>
+                                            </>
+                                        ) : (
+                                            <div className="flex items-center justify-center py-4">
+                                                <p className="text-[1.3rem] text-muted-foreground">
+                                                    검증 대상이 없습니다.
+                                                </p>
+                                            </div>
                                         )}
                                     </div>
-                                ) : (
-                                    <div className="flex items-center justify-center py-4">
-                                        <p className="text-[1.3rem] text-muted-foreground">
-                                            검증 대상이 없습니다.
-                                        </p>
+                                </div>
+                                {/* //검증 대상 */}
+
+                                {/* 검증 변수 */}
+                                <div className="flex-[0.5]">
+                                    <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
+                                        검증 변수
+                                    </h4>
+
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-4">
+                                            <Label className="w-32 text-label">
+                                                μ
+                                            </Label>
+                                            <Input
+                                                type="number"
+                                                value={formState.mu}
+                                                onChange={(event) =>
+                                                    handleFormChange(
+                                                        "mu",
+                                                        event.target.value,
+                                                    )
+                                                }
+                                                className="flex-1"
+                                            />
+                                        </div>
+
+                                        <div className="flex items-center gap-4">
+                                            <Label className="w-32 text-label">
+                                                Percentile
+                                            </Label>
+                                            <Input
+                                                type="number"
+                                                value={formState.percentile}
+                                                onChange={(event) =>
+                                                    handleFormChange(
+                                                        "percentile",
+                                                        event.target.value,
+                                                    )
+                                                }
+                                                className="flex-1"
+                                            />
+                                        </div>
+
+                                        <div className="flex items-center gap-4">
+                                            <Label className="w-32 text-label">
+                                                A
+                                            </Label>
+                                            <Input
+                                                type="number"
+                                                value={formState.a}
+                                                onChange={(event) =>
+                                                    handleFormChange(
+                                                        "a",
+                                                        event.target.value,
+                                                    )
+                                                }
+                                                className="flex-1"
+                                            />
+                                        </div>
+
+                                        <div className="flex items-center gap-4">
+                                            <Label className="w-32 text-label">
+                                                C
+                                            </Label>
+                                            <Input
+                                                type="number"
+                                                value={formState.c}
+                                                onChange={(event) =>
+                                                    handleFormChange(
+                                                        "c",
+                                                        event.target.value,
+                                                    )
+                                                }
+                                                className="flex-1"
+                                            />
+                                        </div>
                                     </div>
-                                )}
+                                </div>
+                                {/* //검증 변수 */}
                             </div>
-                        </div>
-                        {/* //검증 대상 */}
-
-                        {/* 검증 변수 */}
-                        <div className="flex-[0.5]">
-                            <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
-                                검증 변수
-                            </h4>
-
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-4">
-                                    <Label className="w-32 text-label">μ</Label>
-                                    <Input
-                                        type="number"
-                                        value={formState.mu}
-                                        onChange={(event) =>
-                                            handleFormChange(
-                                                "mu",
-                                                event.target.value,
-                                            )
-                                        }
-                                        className="flex-1"
-                                    />
-                                </div>
-
-                                <div className="flex items-center gap-4">
-                                    <Label className="w-32 text-label">
-                                        Percentile
-                                    </Label>
-                                    <Input
-                                        type="number"
-                                        value={formState.percentile}
-                                        onChange={(event) =>
-                                            handleFormChange(
-                                                "percentile",
-                                                event.target.value,
-                                            )
-                                        }
-                                        className="flex-1"
-                                    />
-                                </div>
-
-                                <div className="flex items-center gap-4">
-                                    <Label className="w-32 text-label">A</Label>
-                                    <Input
-                                        type="number"
-                                        value={formState.a}
-                                        onChange={(event) =>
-                                            handleFormChange(
-                                                "a",
-                                                event.target.value,
-                                            )
-                                        }
-                                        className="flex-1"
-                                    />
-                                </div>
-
-                                <div className="flex items-center gap-4">
-                                    <Label className="w-32 text-label">C</Label>
-                                    <Input
-                                        type="number"
-                                        value={formState.c}
-                                        onChange={(event) =>
-                                            handleFormChange(
-                                                "c",
-                                                event.target.value,
-                                            )
-                                        }
-                                        className="flex-1"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        {/* //검증 변수 */}
+                        )}
                     </div>
-                )}
-            </div>
 
-            <div className="mt-10 px-2 pb-8">
-                <h3 className="mb-4 text-[1.6rem] font-semibold text-title">
-                    검증 이력
-                </h3>
-                <div className="card card-border !m-0 !mb-2 flex justify-between">
-                    <div className="flex items-center gap-4 px-2">
-                        <span className="text-[1.3rem] font-medium text-label">
-                            검증일시
-                        </span>
-                        <DateRangePicker
-                            value={historyDateRange as any}
-                            defaultValue={defaultHistoryDateRange as any}
-                            onValueChange={(value) =>
-                                setHistoryDateRange((value as any) ?? undefined)
-                            }
-                            className="max-w-[26rem]"
+                    <div className="mt-10 px-2 pb-8">
+                        <h3 className="mb-4 text-[1.6rem] font-semibold text-title">
+                            검증 이력
+                        </h3>
+                        <div className="card card-border !m-0 !mb-2 flex justify-between">
+                            <div className="flex items-center gap-4 px-2">
+                                <span className="text-[1.3rem] font-medium text-label">
+                                    검증일시
+                                </span>
+                                <DateRangePicker
+                                    value={historyDateRange}
+                                    defaultValue={defaultHistoryDateRange}
+                                    onValueChange={(value) =>
+                                        setHistoryDateRange(
+                                            value?.from
+                                                ? (value as DateRangeValue)
+                                                : undefined,
+                                        )
+                                    }
+                                    className="max-w-[26rem]"
+                                />
+                            </div>
+                            <div className="flex gap-2">
+                                <Button
+                                    type="button"
+                                    className="h-[3.2rem] px-4 text-[1.3rem]"
+                                    onClick={handleHistoryDateSearch}
+                                >
+                                    조회
+                                </Button>
+                                <Button
+                                    type="button"
+                                    color="gray"
+                                    className="h-[3.2rem] px-4 text-[1.3rem]"
+                                    onClick={handleHistoryDateReset}
+                                >
+                                    초기화
+                                </Button>
+                            </div>
+                        </div>
+                        <DataTable
+                            table={table}
+                            variant="secondary"
+                            onRowClick={handleHistoryRowClick}
+                            viewPagination={true}
+                            className="[&_td]:!p-0"
                         />
                     </div>
-                    <div className="flex gap-2">
-                        <Button
-                            type="button"
-                            className="h-[3.2rem] px-4 text-[1.3rem]"
-                            onClick={handleHistoryDateSearch}
-                        >
-                            조회
-                        </Button>
-                        <Button
-                            type="button"
-                            color="gray"
-                            className="h-[3.2rem] px-4 text-[1.3rem]"
-                            onClick={handleHistoryDateReset}
-                        >
-                            초기화
-                        </Button>
-                    </div>
-                </div>
-                <DataTable
-                    table={table}
-                    variant="secondary"
-                    onRowClick={handleHistoryRowClick}
-                    viewPagination={true}
-                    className="[&_td]:!p-0"
-                />
-            </div>
+                </>
+            )}
 
             <Dialog open={outlierDialog.open} onOpenChange={closeOutlierDialog}>
                 <DialogContent className="max-w-[800px]">

apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx

@@ -0,0 +1,525 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+    getCoreRowModel,
+    getPaginationRowModel,
+    useReactTable,
+} from "@tanstack/react-table";
+import type { ChartOptions } from "chart.js";
+import {
+    CategoryScale,
+    Chart as ChartJS,
+    Legend,
+    LinearScale,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip as ChartTooltip,
+} from "chart.js";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import { CodeSelect } from "@/entities/code";
+import type {
+    AdstZoneResponseDto,
+    StAnlsMstResponse,
+    StAnlsMstSearchParams,
+    StAnlsRsltResponse,
+} from "@/entities/statistics";
+import {
+    imrDetailGridColumnInfo,
+    imrVerificationHistoryColumns,
+} from "@/entities/statistics";
+import { stAnlsMstApi } from "@/entities/statistics/api/statistics-analysis-master-api";
+import { imrApi } from "@/entities/statistics/api/imr-api";
+import {
+    useStAnlsSidoCombo,
+    useStAnlsSigunguCombo,
+} from "@/entities/statistics/api/queries";
+import { stAnlsRsltApi } from "@/entities/statistics/api/statistics-analysis-result-api";
+import {
+    Button,
+    DataTable,
+    DateRangePicker,
+    Label,
+    LoadingWithAnimation,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    ChartTooltip,
+    Legend,
+);
+
+type DateRangeValue = {
+    from: Date;
+    to?: Date;
+};
+
+const EMPTY_DATA: never[] = [];
+const EMPTY_ADST_LIST: AdstZoneResponseDto[] = [];
+
+const ImrVerificationHistory = () => {
+    // Area A Search States
+    const [searchSido, setSearchSido] = useState<string>("");
+    const [searchSigungu, setSearchSigungu] = useState<string>("");
+    const [searchStatsCd, setSearchStatsCd] = useState<string>("");
+    const [dateRange, setDateRange] = useState<DateRangeValue | undefined>({
+        from: dayjs().subtract(1, "month").toDate(),
+        to: dayjs().toDate(),
+    });
+    const [appliedSearchParams, setAppliedSearchParams] =
+        useState<StAnlsMstSearchParams>({
+            page: 0,
+            size: 10,
+            vrfcMthdCd: "IMR",
+            sort: "anlsSn,desc",
+        });
+
+    // Selected States
+    const [selectedHistory, setSelectedHistory] =
+        useState<StAnlsMstResponse | null>(null);
+    const [selectedDetail, setSelectedDetail] =
+        useState<StAnlsRsltResponse | null>(null);
+    const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+    // Area B Grid State
+    const [gridRowData, setGridRowData] = useState<
+        Record<string, string | number>[]
+    >([]);
+
+    // Area A Pagination
+    const [historyPagination, setHistoryPagination] = useState({
+        pageIndex: 0,
+        pageSize: 5,
+    });
+
+    const { data: sidoData } = useStAnlsSidoCombo();
+    const { data: sigunguData } = useStAnlsSigunguCombo(searchSido);
+    const sidoOptions = sidoData ?? EMPTY_ADST_LIST;
+    const sigunguOptions = sigunguData ?? EMPTY_ADST_LIST;
+
+    // Area A Data Fetching
+    const { data: historyData } = useQuery({
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST,
+            "imr",
+            appliedSearchParams,
+            historyPagination,
+        ],
+        queryFn: () =>
+            stAnlsMstApi.getImrAnalysisMasterList({
+                ...appliedSearchParams,
+                page: historyPagination.pageIndex,
+                size: historyPagination.pageSize,
+            }),
+    });
+
+    const historyTable = useReactTable({
+        data: historyData?.content ?? EMPTY_DATA,
+        columns: imrVerificationHistoryColumns,
+        getRowId: (row) => String(row.anlsSn),
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
+        pageCount: historyData?.totalPages ?? 0,
+        state: {
+            pagination: historyPagination,
+            rowSelection: selectedHistory
+                ? { [selectedHistory.anlsSn]: true }
+                : {},
+        },
+        onPaginationChange: setHistoryPagination,
+    });
+
+    // Area B Data Fetching
+    const { data: detailData, isLoading: isDetailLoading } = useQuery({
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_RSLT,
+            selectedHistory?.anlsSn,
+        ],
+        queryFn: () =>
+            stAnlsRsltApi.getImrResultList(selectedHistory!.anlsSn, {
+                page: 0,
+                size: 100,
+                sort: "rsltSn,asc",
+            }),
+        enabled: !!selectedHistory,
+    });
+
+    useEffect(() => {
+        if (!detailData || !detailData.content) {
+            setGridRowData([]);
+            return;
+        }
+        const mapped = detailData.content.map((item) => ({
+            ...item,
+            statsNm: selectedHistory?.vrfcTrgtNm ?? "-",
+        }));
+        setGridRowData(mapped as Record<string, string | number>[]);
+    }, [detailData, selectedHistory]);
+
+    // Area C Data Fetching
+    const { data: chartData, isLoading: isChartLoading } = useQuery({
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.IMR,
+            selectedHistory?.anlsSn,
+            selectedDetail?.vrfcTrgtSn,
+            selectedDetail?.admdstCd,
+        ],
+        queryFn: () =>
+            imrApi.getOutliersLog({
+                jobUuid: selectedHistory!.jobUuid,
+                anlsSn: selectedDetail!.anlsSn,
+                vrfcTrgtSn: selectedDetail!.vrfcTrgtSn,
+                admdstCd: selectedDetail!.admdstCd,
+            }),
+        enabled: !!selectedHistory && !!selectedDetail,
+    });
+
+    const handleSearch = () => {
+        const params: StAnlsMstSearchParams = {
+            vrfcMthdCd: "IMR",
+            sort: "anlsSn,desc",
+        };
+        if (searchSido !== "")
+            params.sewerBzmnCd =
+                searchSigungu !== "" ? searchSigungu : searchSido;
+        if (searchStatsCd) params.statsCd = searchStatsCd;
+        if (dateRange?.from)
+            params.verifyDtStart = dayjs(dateRange.from).format("YYYY-MM-DD");
+        if (dateRange?.to)
+            params.verifyDtEnd = dayjs(dateRange.to).format("YYYY-MM-DD");
+
+        setAppliedSearchParams(params);
+        setHistoryPagination((prev) => ({ ...prev, pageIndex: 0 }));
+        setSelectedHistory(null);
+        setSelectedDetail(null);
+    };
+
+    const handleReset = () => {
+        setSearchSido("");
+        setSearchSigungu("");
+        setSearchStatsCd("");
+        const defaultRange = {
+            from: dayjs().subtract(1, "month").toDate(),
+            to: dayjs().toDate(),
+        };
+        setDateRange(defaultRange);
+    };
+
+    const handleDownload = async () => {
+        if (!selectedHistory || isDownloading) return;
+        setIsDownloading(true);
+
+        try {
+            const blob = await stAnlsRsltApi.downloadExcelImr(
+                selectedHistory.anlsSn,
+            );
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `IMR_분석결과.xlsx`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } catch (error) {
+            console.error("Failed to download IMR excel", error);
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    const chartOptions: ChartOptions<"line"> = useMemo(
+        () => ({
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: "top" as const,
+                    labels: {
+                        font: {
+                            size: 12,
+                        },
+                    },
+                },
+                title: {
+                    display: true,
+                    text: "I-MR 잔차 관리도",
+                    font: {
+                        size: 16,
+                        weight: "bold",
+                    },
+                },
+            },
+            scales: {
+                y: {
+                    beginAtZero: false,
+                    title: {
+                        display: true,
+                        text: "수치",
+                    },
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "연도",
+                    },
+                },
+            },
+        }),
+        [selectedDetail],
+    );
+
+    const lineChartData = useMemo(() => {
+        if (!chartData || !chartData.history) return null;
+
+        const labels = chartData.history.map((h) => String(h.year));
+        const actualData = chartData.history.map((h) => h.x);
+        const uclData = chartData.history.map((h) => h.ucl);
+        const lclData = chartData.history.map((h) => h.lcl);
+        const predictedData = chartData.history.map((h) => h.predicted);
+
+        return {
+            labels,
+            datasets: [
+                {
+                    label: "실측치 (X)",
+                    data: actualData,
+                    borderColor: "rgb(75, 192, 192)",
+                    backgroundColor: "rgba(75, 192, 192, 0.5)",
+                    tension: 0.1,
+                    pointRadius: 4,
+                    pointHoverRadius: 6,
+                },
+                {
+                    label: "상한선 (UCL)",
+                    data: uclData,
+                    borderColor: "rgb(255, 99, 132)",
+                    backgroundColor: "rgba(255, 99, 132, 0.2)",
+                    borderDash: [5, 5],
+                    pointStyle: "false",
+                    fill: false,
+                },
+                {
+                    label: "하한선 (LCL)",
+                    data: lclData,
+                    borderColor: "rgb(54, 162, 235)",
+                    backgroundColor: "rgba(54, 162, 235, 0.2)",
+                    borderDash: [5, 5],
+                    pointStyle: "false",
+                    fill: false,
+                },
+                {
+                    label: "예측치 (Predicted)",
+                    data: predictedData,
+                    borderColor: "rgb(153, 102, 255)",
+                    backgroundColor: "rgba(153, 102, 255, 0.5)",
+                    borderDash: [2, 2],
+                    pointStyle: "false",
+                    fill: false,
+                },
+            ],
+        };
+    }, [chartData]);
+
+    return (
+        <div className="flex flex-col gap-4">
+            {/* 영역 A: 검증 이력 그리드 + 검색 필터 */}
+            <div className="card card-border bg-white p-6">
+                <div className="flex flex-wrap items-end gap-6 p-2">
+                    <div className="flex items-center gap-2">
+                        <Label className="text-[1.3rem] font-medium text-label">
+                            시도
+                        </Label>
+                        <Select
+                            value={searchSido}
+                            onValueChange={(val) => {
+                                setSearchSido(val);
+                                setSearchSigungu("");
+                            }}
+                        >
+                            <SelectTrigger className="w-[14rem]">
+                                <SelectValue placeholder="시도 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {sidoOptions.map((opt) => (
+                                    <SelectItem
+                                        key={opt.adstCd}
+                                        value={opt.adstCd}
+                                    >
+                                        {opt.adstNm}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Label className="text-[1.3rem] font-medium text-label">
+                            시군구
+                        </Label>
+                        <Select
+                            value={searchSigungu}
+                            onValueChange={setSearchSigungu}
+                            disabled={searchSido === ""}
+                        >
+                            <SelectTrigger className="w-[14rem]">
+                                <SelectValue placeholder="시군구 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {sigunguOptions.map((opt) => (
+                                    <SelectItem
+                                        key={opt.adstCd}
+                                        value={opt.adstCd}
+                                    >
+                                        {opt.adstNm}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Label className="text-[1.3rem] font-medium text-label">
+                            검증일시
+                        </Label>
+                        <DateRangePicker
+                            value={dateRange}
+                            onValueChange={(val) =>
+                                setDateRange(
+                                    val
+                                        ? { from: val.from!, to: val.to }
+                                        : undefined,
+                                )
+                            }
+                            className="w-[20rem]"
+                        />
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Label className="text-[1.3rem] font-medium text-label">
+                            통계항목
+                        </Label>
+                        <CodeSelect
+                            upCd="STITEM"
+                            value={searchStatsCd}
+                            onValueChange={setSearchStatsCd}
+                            placeholder="통계항목 선택"
+                            className="w-[22rem]"
+                        />
+                    </div>
+
+                    <div className="ml-auto flex gap-2">
+                        <Button color="gray" onClick={handleReset}>
+                            초기화
+                        </Button>
+                        <Button onClick={handleSearch}>검색</Button>
+                    </div>
+                </div>
+
+                <div className="mt-2 pb-4">
+                    <DataTable
+                        table={historyTable}
+                        variant="secondary"
+                        onRowClick={(row) => {
+                            setSelectedHistory(row);
+                            setSelectedDetail(null);
+                        }}
+                        viewPagination={true}
+                        className="[&_td]:!p-0"
+                    />
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                {/* 영역 B: 상세 데이터 그리드 */}
+                <div className="card card-border bg-white p-4">
+                    <div className="flex items-center justify-between">
+                        <h2 className="pl-2 text-[1.6rem] font-bold text-title">
+                            이상치 데이터
+                        </h2>
+                        <Button
+                            color="green"
+                            disabled={
+                                !detailData ||
+                                detailData.content.length === 0 ||
+                                isDownloading
+                            }
+                            onClick={handleDownload}
+                        >
+                            다운로드
+                        </Button>
+                    </div>
+                    <div className="mt-2">
+                        {isDetailLoading ? (
+                            <div className="flex h-[39rem] w-full items-center justify-center">
+                                <div className="relative size-[5rem]">
+                                    <LoadingWithAnimation color="primary" />
+                                </div>
+                            </div>
+                        ) : !selectedHistory || gridRowData.length === 0 ? (
+                            <div className="flex h-[39rem] w-full items-center justify-center text-[1.4rem] text-muted-foreground">
+                                {!selectedHistory
+                                    ? "항목을 선택해주세요."
+                                    : "표시할 항목이 없습니다."}
+                            </div>
+                        ) : (
+                            <DataGrid
+                                columnInfo={imrDetailGridColumnInfo}
+                                rowData={gridRowData}
+                                setRowData={setGridRowData}
+                                idFieldName="rsltSn"
+                                isExcelExport={false}
+                                isExcelImport={false}
+                                highlightedRowId={selectedDetail?.rsltSn}
+                                onRowClick={(e) => {
+                                    if (!e.anlsSn) return;
+                                    const row = detailData?.content?.find(
+                                        (item) =>
+                                            String(item.rsltSn) ===
+                                            String(e.rsltSn),
+                                    );
+                                    if (row) setSelectedDetail(row);
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                {/* 영역 C: Line Chart */}
+                <div className="m-2 flex h-[45rem] items-center justify-center rounded-sm border bg-white p-4">
+                    {isChartLoading ? (
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    ) : lineChartData ? (
+                        <Line options={chartOptions} data={lineChartData} />
+                    ) : (
+                        <div className="text-[1.4rem]">
+                            이상치 데이터를 선택하면 차트가 표시됩니다.
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ImrVerificationHistory;

apps/st/src/components/statistics/verification/VerificationArticleManagement.tsx

@@ -1,13 +1,29 @@
 "use client";
 
-import DataGrid from "@/components/module/DataGrid";
+import { useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { CodeSelect } from "@/entities/code/ui/code-select";
 import {
     hbArticleColumnInfo,
     imrArticleColumnInfo,
     validationArticleColumnInfo,
-} from "@/entities/statistics/model/verification-article-column";
+} from "@/entities/statistics";
+import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
+import type {
+    VerificationTargetManagementResponse,
+    VerificationTargetManagementSearchParams,
+} from "@/entities/statistics/model/verification-target-management-interface";
 import {
     Button,
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
     Input,
     Label,
     Tabs,
@@ -15,17 +31,10 @@ import {
     TabsList,
     TabsTrigger,
 } from "@common/components";
-import { CodeSelect } from "@/entities/code/ui/code-select";
-import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { ENDPOINT } from "@/shared/config";
-import type {
-    VerificationTargetManagementSearchParams,
-    VerificationTargetManagementResponse,
-} from "@/entities/statistics/model/verification-target-management-interface";
+
 import { VerificationTargetDialog } from "./VerificationTargetDialog";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import DataGrid from "@/components/module/DataGrid";
 
 const TAB_CONFIG = {
     HB: { value: "HB", label: "H-B", columnInfo: hbArticleColumnInfo },
@@ -54,6 +63,8 @@ function VerificationArticleManagement() {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [selectedData, setSelectedData] =
         useState<VerificationTargetManagementResponse | null>(null);
+    const [resultDialogOpen, setResultDialogOpen] = useState(false);
+    const [resultDialogMessage, setResultDialogMessage] = useState("");
 
     const { data: verificationData } = useQuery({
         queryKey: [ENDPOINT.STATVERIFY_SERVICE.VRFCTGT_MNG, searchParams],
@@ -64,6 +75,7 @@ function VerificationArticleManagement() {
                         vrfcMthdCd: searchParams.vrfcMthdCd,
                         statsCd: searchParams.statsCd || undefined,
                         vrfcTrgtNm: searchParams.vrfcTrgtNm || undefined,
+                        sort: ["statsCd,asc", "vrfcTrgtNm,asc"],
                     },
                 );
             return response;
@@ -104,6 +116,30 @@ function VerificationArticleManagement() {
         });
     }
 
+    const saveMutation = useMutation({
+        mutationFn: (data: VerificationTargetManagementResponse) =>
+            verificationTargetManagementApi.saveVerificationTargetManagement({
+                vrfcMthdCd: data.vrfcMthdCd || activeTab,
+                statsCd: data.statsCd,
+                schmNm: data.schmNm,
+                tblNm: data.tblNm,
+                colNm: data.colNm,
+                pkColNm: data.pkColNm,
+                ipcrCntVl: data.ipcrCntVl,
+                pctlCrtrVl: data.pctlCrtrVl,
+                scopCntCntVl: data.scopCntCntVl,
+                thrsCntVl: data.thrsCntVl,
+                useYn: data.useYn,
+                vrfcTrgtNm: data.vrfcTrgtNm,
+            }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [ENDPOINT.STATVERIFY_SERVICE.VRFCTGT_MNG],
+            });
+            setDialogOpen(false);
+        },
+    });
+
     const updateMutation = useMutation({
         mutationFn: (data: VerificationTargetManagementResponse) =>
             verificationTargetManagementApi.updateVerificationTargetManagement(
@@ -144,6 +180,23 @@ function VerificationArticleManagement() {
         },
     });
 
+    const checkColumnsMutation = useMutation({
+        mutationFn: () =>
+            verificationTargetManagementApi.checkColumnsExist({
+                vrfcMthdCd: activeTab,
+            }),
+        onSuccess: (response) => {
+            setResultDialogMessage(
+                response.message || "컬럼 검사가 완료되었습니다.",
+            );
+            setResultDialogOpen(true);
+        },
+        onError: () => {
+            setResultDialogMessage("컬럼 검사 중 오류가 발생했습니다.");
+            setResultDialogOpen(true);
+        },
+    });
+
     function handleRowClick(rowData: Record<string, string | number>) {
         setSelectedData(
             rowData as unknown as VerificationTargetManagementResponse,
@@ -151,6 +204,11 @@ function VerificationArticleManagement() {
         setDialogOpen(true);
     }
 
+    function handleRegister() {
+        setSelectedData(null);
+        setDialogOpen(true);
+    }
+
     function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
         handleSearch();
@@ -158,7 +216,11 @@ function VerificationArticleManagement() {
 
     async function handleSave(data: VerificationTargetManagementResponse) {
         if (await confirm("저장하시겠습니까?")) {
-            updateMutation.mutate(data);
+            if (data.vrfcTrgtSn) {
+                updateMutation.mutate(data);
+            } else {
+                saveMutation.mutate(data);
+            }
         }
     }
 
@@ -168,94 +230,137 @@ function VerificationArticleManagement() {
         }
     }
 
+    async function handleCheckColumns() {
+        if (!(await confirm("컬럼 검사를 실행하시겠습니까?"))) return;
+        checkColumnsMutation.mutate();
+    }
+
     return (
-        <Tabs
-            defaultValue="HB"
-            value={activeTab}
-            onValueChange={handleTabChange}
-        >
-            <TabsList>
+        <>
+            <Tabs
+                defaultValue="HB"
+                value={activeTab}
+                onValueChange={handleTabChange}
+            >
+                <TabsList>
+                    {Object.entries(TAB_CONFIG).map(([key, config]) => (
+                        <TabsTrigger
+                            key={key}
+                            value={config.value}
+                            className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
+                        >
+                            {config.label}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+
+                <div className="card card-border !mx-0">
+                    <form onSubmit={handleSubmit}>
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-4">
+                                <Label className="whitespace-nowrap px-4 text-label">
+                                    통계항목
+                                </Label>
+                                <CodeSelect
+                                    upCd="STITEM"
+                                    value={statsCd}
+                                    onValueChange={setStatsCd}
+                                    placeholder="선택"
+                                    className="w-[16rem]"
+                                />
+                            </div>
+
+                            <div className="flex items-center gap-4">
+                                <Label className="whitespace-nowrap px-4 text-label">
+                                    검증명
+                                </Label>
+                                <Input
+                                    value={vrfcTrgtNm}
+                                    onChange={(e) =>
+                                        setVrfcTrgtNm(e.target.value)
+                                    }
+                                    placeholder="검증명"
+                                    className="w-[20rem]"
+                                />
+                            </div>
+
+                            <div className="ml-auto flex gap-2">
+                                <Button
+                                    type="button"
+                                    color="white"
+                                    className="h-[3.6rem]"
+                                    onClick={handleCheckColumns}
+                                    disabled={checkColumnsMutation.isPending}
+                                >
+                                    컬럼 검사
+                                </Button>
+                                <Button
+                                    type="button"
+                                    className="h-[3.6rem]"
+                                    onClick={handleRegister}
+                                >
+                                    등록
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    color="green"
+                                    className="h-[3.6rem]"
+                                >
+                                    조회
+                                </Button>
+                                <Button
+                                    type="button"
+                                    color="gray"
+                                    className="h-[3.6rem]"
+                                    onClick={handleInitialize}
+                                >
+                                    초기화
+                                </Button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
                 {Object.entries(TAB_CONFIG).map(([key, config]) => (
-                    <TabsTrigger
-                        key={key}
-                        value={config.value}
-                        className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
-                    >
-                        {config.label}
-                    </TabsTrigger>
+                    <TabsContent key={key} value={config.value}>
+                        <DataGrid
+                            columnInfo={columnInfo}
+                            rowData={rowData}
+                            setRowData={() => {}}
+                            onRowClick={handleRowClick}
+                            isExcelImport={false}
+                        />
+                    </TabsContent>
                 ))}
-            </TabsList>
 
-            <div className="card card-border !mx-0">
-                <form onSubmit={handleSubmit}>
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center gap-4">
-                            <Label className="whitespace-nowrap px-4 text-label">
-                                통계항목
-                            </Label>
-                            <CodeSelect
-                                upCd="STITEM"
-                                value={statsCd}
-                                onValueChange={setStatsCd}
-                                placeholder="선택"
-                                className="w-[16rem]"
-                            />
-                        </div>
-
-                        <div className="flex items-center gap-4">
-                            <Label className="whitespace-nowrap px-4 text-label">
-                                검증명
-                            </Label>
-                            <Input
-                                value={vrfcTrgtNm}
-                                onChange={(e) => setVrfcTrgtNm(e.target.value)}
-                                placeholder="검증명"
-                                className="w-[20rem]"
-                            />
-                        </div>
-
-                        <div className="ml-auto flex gap-2">
-                            <Button
-                                type="submit"
-                                color="green"
-                                className="h-[3.6rem] w-[80px]"
-                            >
-                                조회
-                            </Button>
-                            <Button
-                                type="button"
-                                color="gray"
-                                className="h-[3.6rem] w-[80px]"
-                                onClick={handleInitialize}
-                            >
-                                초기화
-                            </Button>
-                        </div>
+                <VerificationTargetDialog
+                    tabValue={activeTab}
+                    open={dialogOpen}
+                    onOpenChange={setDialogOpen}
+                    data={selectedData}
+                    onSave={handleSave}
+                    onDelete={handleDelete}
+                />
+            </Tabs>
+            <Dialog open={resultDialogOpen} onOpenChange={setResultDialogOpen}>
+                <DialogContent
+                    className="max-w-[60rem]"
+                    aria-describedby={undefined}
+                >
+                    <DialogHeader>
+                        <DialogTitle>컬럼 검사 결과</DialogTitle>
+                    </DialogHeader>
+                    <div className="max-h-[50rem] overflow-y-auto whitespace-pre-wrap break-words text-[1.4rem]">
+                        {resultDialogMessage}
                     </div>
-                </form>
-            </div>
-
-            {Object.entries(TAB_CONFIG).map(([key, config]) => (
-                <TabsContent key={key} value={config.value}>
-                    <DataGrid
-                        columnInfo={columnInfo}
-                        rowData={rowData}
-                        setRowData={() => {}}
-                        onRowClick={handleRowClick}
-                        isExcelImport={false}
-                    />
-                </TabsContent>
-            ))}
-
-            <VerificationTargetDialog
-                tabValue={activeTab}
-                open={dialogOpen}
-                onOpenChange={setDialogOpen}
-                data={selectedData}
-                onSave={handleSave}
-                onDelete={handleDelete}
-            />
-        </Tabs>
+                    <DialogFooter>
+                        <Button onClick={() => setResultDialogOpen(false)}>
+                            확인
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }
 

apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx

@@ -1,5 +1,21 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Search } from "lucide-react";
+
+import { CodeSelect } from "@/entities/code/ui/code-select";
+import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
+import type {
+    NumericColumnDto,
+    VerificationTargetManagementResponse,
+} from "@/entities/statistics/model/verification-target-management-interface";
+import {
+    type VerificationTargetManagementFormData,
+    verificationTargetManagementSchema,
+} from "@/entities/statistics/model/verification-target-management-schema";
 import {
     Button,
     Dialog,
@@ -12,17 +28,10 @@ import {
     TableBody,
     TableCell,
     TableHead,
+    TableHeader,
     TableRow,
 } from "@common/components";
-import { CodeSelect } from "@/entities/code/ui/code-select";
-import type { VerificationTargetManagementResponse } from "@/entities/statistics/model/verification-target-management-interface";
-import {
-    verificationTargetManagementSchema,
-    type VerificationTargetManagementFormData,
-} from "@/entities/statistics/model/verification-target-management-schema";
-import { useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+
 import type { TabValue } from "./VerificationArticleManagement";
 
 interface VerificationTargetDialogProps {
@@ -42,24 +51,49 @@ export function VerificationTargetDialog({
     onSave,
     onDelete,
 }: VerificationTargetDialogProps) {
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { errors },
-    } = useForm<VerificationTargetManagementFormData>({
-        resolver: zodResolver(verificationTargetManagementSchema),
-        defaultValues: data || undefined,
-    });
+    const { control, handleSubmit, reset, watch, getValues, setValue } =
+        useForm<VerificationTargetManagementFormData>({
+            resolver: zodResolver(verificationTargetManagementSchema),
+            defaultValues: data || {
+                vrfcMthdCd: tabValue,
+                statsCd: "",
+                vrfcTrgtNm: "",
+                schmNm: "",
+                tblNm: "",
+                colNm: "",
+                pkColNm: "",
+                useYn: "Y",
+            },
+        });
+    const watchStatsCd = watch("statsCd");
+
+    const [isColumnDialogOpen, setIsColumnDialogOpen] = useState(false);
+    const [numericColumns, setNumericColumns] = useState<NumericColumnDto[]>(
+        [],
+    );
 
     useEffect(() => {
-        if (data && open) reset(data);
-    }, [data, open, reset]);
+        if (open) {
+            reset(
+                data || {
+                    vrfcMthdCd: tabValue,
+                    statsCd: "",
+                    vrfcTrgtNm: "",
+                    schmNm: "",
+                    tblNm: "",
+                    colNm: "",
+                    pkColNm: "",
+                    useYn: "Y",
+                },
+            );
+        } else {
+            setNumericColumns([]);
+        }
+    }, [data, open, reset, tabValue]);
 
     function onSubmit(formData: VerificationTargetManagementFormData) {
-        if (!data) return;
         onSave({
-            ...data,
+            ...(data || {}),
             ...formData,
         } as VerificationTargetManagementResponse);
     }
@@ -70,307 +104,468 @@ export function VerificationTargetDialog({
         }
     }
 
-    if (!data) return null;
+    async function handleSearchTableMetadata(e?: React.MouseEvent) {
+        e?.preventDefault();
+        const statsCd = getValues("statsCd");
+        if (!statsCd) {
+            alert("통계항목을 선택해주세요.");
+            return;
+        }
+
+        try {
+            const metadata =
+                await verificationTargetManagementApi.getTableInfo(statsCd);
+
+            setValue("schmNm", metadata.schmNm, { shouldValidate: true });
+            setValue("tblNm", metadata.tblNm, { shouldValidate: true });
+
+            if (metadata.pkColumns && metadata.pkColumns.length > 0) {
+                setValue("pkColNm", metadata.pkColumns.join(", "), {
+                    shouldValidate: true,
+                });
+            }
+
+            setNumericColumns(metadata.numericColumns || []);
+            setIsColumnDialogOpen(true);
+        } catch (error) {
+            alert("테이블 정보를 조회하는 중 오류가 발생했습니다.");
+            console.error(error);
+        }
+    }
+
+    function handleOpenColumnDialog(e?: React.MouseEvent) {
+        e?.preventDefault();
+        if (numericColumns.length === 0) {
+            handleSearchTableMetadata();
+        } else {
+            setIsColumnDialogOpen(true);
+        }
+    }
+
+    function handleSelectColumn(colNm: string) {
+        setValue("colNm", colNm, { shouldValidate: true });
+        setIsColumnDialogOpen(false);
+    }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-[800px]">
-                <DialogHeader>
-                    <DialogTitle>검증 항목 상세</DialogTitle>
-                </DialogHeader>
+        <>
+            <Dialog open={open} onOpenChange={onOpenChange}>
+                <DialogContent className="max-w-[800px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {data ? "검증 항목 상세" : "검증 항목 등록"}
+                        </DialogTitle>
+                    </DialogHeader>
 
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <Table variant="secondary">
-                        <TableBody>
-                            <TableRow>
-                                <TableHead
-                                    className="w-[150px] bg-muted font-medium"
-                                    data-required
-                                >
-                                    통계항목
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="statsCd"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <div className="space-y-1">
-                                                <CodeSelect
-                                                    upCd="STITEM"
-                                                    value={field.value}
-                                                    onValueChange={
-                                                        field.onChange
-                                                    }
-                                                    placeholder="선택"
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </TableCell>
-                                <TableHead
-                                    className="w-[150px] bg-muted font-medium"
-                                    data-required
-                                >
-                                    검증명
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="vrfcTrgtNm"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <Input
-                                                {...field}
-                                                value={field.value || ""}
-                                                placeholder="검증명"
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <Table variant="secondary">
+                            <colgroup>
+                                <col style={{ width: "20%" }} />
+                                <col style={{ width: "30%" }} />
+                                <col style={{ width: "20%" }} />
+                                <col style={{ width: "30%" }} />
+                            </colgroup>
+                            <TableBody>
+                                <TableRow>
+                                    <TableHead
+                                        className="w-[150px] bg-muted font-medium"
+                                        data-required
+                                    >
+                                        통계항목
+                                    </TableHead>
+                                    <TableCell>
+                                        <div className="flex items-center gap-2">
+                                            <Controller
+                                                name="statsCd"
+                                                control={control}
+                                                render={({ field }) => (
+                                                    <CodeSelect
+                                                        upCd="STITEM"
+                                                        value={field.value}
+                                                        onValueChange={
+                                                            field.onChange
+                                                        }
+                                                        placeholder="선택"
+                                                        className="flex-1"
+                                                    />
+                                                )}
                                             />
-                                        )}
-                                    />
-                                </TableCell>
-                            </TableRow>
-
-                            <TableRow>
-                                <TableHead
-                                    className="bg-muted font-medium"
-                                    data-required
-                                >
-                                    스키마명
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="schmNm"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <div className="space-y-1">
-                                                <Input
-                                                    {...field}
-                                                    placeholder="스키마명"
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </TableCell>
-                                <TableHead
-                                    className="bg-muted font-medium"
-                                    data-required
-                                >
-                                    테이블명
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="tblNm"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <div className="space-y-1">
-                                                <Input
-                                                    {...field}
-                                                    placeholder="테이블명"
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </TableCell>
-                            </TableRow>
-
-                            <TableRow>
-                                <TableHead
-                                    className="bg-muted font-medium"
-                                    data-required
-                                >
-                                    컬럼명
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="colNm"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <div className="space-y-1">
-                                                <Input
-                                                    {...field}
-                                                    placeholder="컬럼명"
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </TableCell>
-                                <TableHead
-                                    className="bg-muted font-medium"
-                                    data-required
-                                >
-                                    PK 키
-                                </TableHead>
-                                <TableCell>
-                                    <Controller
-                                        name="pkColNm"
-                                        control={control}
-                                        render={({ field }) => (
-                                            <div className="space-y-1">
-                                                <Input
-                                                    {...field}
-                                                    placeholder="PK 키"
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </TableCell>
-                            </TableRow>
-
-                            {tabValue !== "IMR" && (
-                                <TableRow>
-                                    <TableHead className="bg-muted font-medium">
-                                        중요도 계수(μ)
+                                            <Button
+                                                className="px-4"
+                                                onClick={
+                                                    handleSearchTableMetadata
+                                                }
+                                                disabled={!watchStatsCd}
+                                            >
+                                                조회
+                                            </Button>
+                                        </div>
+                                    </TableCell>
+                                    <TableHead
+                                        className="w-[150px] bg-muted font-medium"
+                                        data-required
+                                    >
+                                        검증명
                                     </TableHead>
                                     <TableCell>
                                         <Controller
-                                            name="ipcrCntVl"
+                                            name="vrfcTrgtNm"
+                                            control={control}
+                                            render={({ field }) => (
+                                                <Input
+                                                    {...field}
+                                                    value={field.value || ""}
+                                                    placeholder="검증명"
+                                                />
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+
+                                <TableRow>
+                                    <TableHead
+                                        className="bg-muted font-medium"
+                                        data-required
+                                    >
+                                        스키마명
+                                    </TableHead>
+                                    <TableCell>
+                                        <Controller
+                                            name="schmNm"
                                             control={control}
                                             render={({ field }) => (
                                                 <div className="space-y-1">
                                                     <Input
-                                                        type="number"
-                                                        min="0"
-                                                        max="1"
-                                                        step="0.1"
-                                                        value={field.value ?? ""}
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? Number(
-                                                                          e.target
-                                                                              .value,
-                                                                      )
-                                                                    : null,
-                                                            )
-                                                        }
-                                                        placeholder="(0 ~ 1, 0.1 단위)"
+                                                        {...field}
+                                                        placeholder="스키마명"
                                                     />
                                                 </div>
                                             )}
                                         />
                                     </TableCell>
-                                    <TableHead className="bg-muted font-medium">
-                                        백분위수 기준값(pct)
+                                    <TableHead
+                                        className="bg-muted font-medium"
+                                        data-required
+                                    >
+                                        테이블명
                                     </TableHead>
                                     <TableCell>
                                         <Controller
-                                            name="pctlCrtrVl"
+                                            name="tblNm"
                                             control={control}
                                             render={({ field }) => (
                                                 <div className="space-y-1">
                                                     <Input
-                                                        type="number"
-                                                        min="0"
-                                                        max="0.5"
-                                                        step="0.1"
-                                                        value={field.value ?? ""}
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? Number(
-                                                                          e.target
-                                                                              .value,
-                                                                      )
-                                                                    : null,
-                                                            )
-                                                        }
-                                                        placeholder="(0 ~ 0.5, 0.1 단위)"
+                                                        {...field}
+                                                        placeholder="테이블명"
                                                     />
                                                 </div>
                                             )}
                                         />
                                     </TableCell>
                                 </TableRow>
-                            )}
 
-                            {tabValue !== "IMR" && (
                                 <TableRow>
-                                    <TableHead className="bg-muted font-medium">
-                                        스케일 조정 계수(A)
+                                    <TableHead
+                                        className="bg-muted font-medium"
+                                        data-required
+                                    >
+                                        컬럼명
                                     </TableHead>
                                     <TableCell>
-                                        <Controller
-                                            name="scopCntCntVl"
-                                            control={control}
-                                            render={({ field }) => (
-                                                <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                            <Controller
+                                                name="colNm"
+                                                control={control}
+                                                render={({ field }) => (
                                                     <Input
-                                                        type="number"
-                                                        min="0"
-                                                        max="1"
-                                                        step="0.01"
-                                                        value={field.value ?? ""}
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? Number(
-                                                                          e.target
-                                                                              .value,
-                                                                      )
-                                                                    : null,
-                                                            )
-                                                        }
-                                                        placeholder="(0 ~ 1, 0.01 단위)"
+                                                        {...field}
+                                                        placeholder="컬럼명"
+                                                        className="flex-1"
                                                     />
-                                                </div>
-                                            )}
-                                        />
+                                                )}
+                                            />
+                                            <Button
+                                                color="white"
+                                                className="whitespace-nowrap px-4"
+                                                onClick={handleOpenColumnDialog}
+                                                disabled={!watchStatsCd}
+                                            >
+                                                목록보기
+                                            </Button>
+                                        </div>
                                     </TableCell>
-                                    <TableHead className="bg-muted font-medium">
-                                        임계 계수(c)
+                                    <TableHead
+                                        className="bg-muted font-medium"
+                                        data-required
+                                    >
+                                        PK 키
                                     </TableHead>
                                     <TableCell>
                                         <Controller
-                                            name="thrsCntVl"
+                                            name="pkColNm"
                                             control={control}
                                             render={({ field }) => (
                                                 <div className="space-y-1">
                                                     <Input
-                                                        type="number"
-                                                        min="0"
-                                                        max="100"
-                                                        step="1"
-                                                        value={field.value ?? ""}
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? Number(
-                                                                          e.target
-                                                                              .value,
-                                                                      )
-                                                                    : null,
-                                                            )
-                                                        }
-                                                        placeholder="(0 ~ 100, 1 단위)"
+                                                        {...field}
+                                                        placeholder="PK 키"
                                                     />
                                                 </div>
                                             )}
                                         />
                                     </TableCell>
                                 </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
 
-                    <DialogFooter className="mt-6">
-                        <Button
-                            type="button"
-                            color="gray"
-                            onClick={() => onOpenChange(false)}
-                        >
-                            취소
-                        </Button>
-                        <Button
-                            type="button"
-                            color="red"
-                            onClick={handleDelete}
-                        >
-                            삭제
-                        </Button>
-                        <Button type="submit" color="green">
-                            저장
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
+                                {tabValue !== "IMR" && (
+                                    <TableRow>
+                                        <TableHead className="bg-muted font-medium">
+                                            중요도 계수(μ)
+                                        </TableHead>
+                                        <TableCell>
+                                            <Controller
+                                                name="ipcrCntVl"
+                                                control={control}
+                                                render={({ field }) => (
+                                                    <div className="space-y-1">
+                                                        <Input
+                                                            type="number"
+                                                            min="0"
+                                                            max="1"
+                                                            step="0.1"
+                                                            value={
+                                                                field.value ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                field.onChange(
+                                                                    e.target
+                                                                        .value
+                                                                        ? Number(
+                                                                              e
+                                                                                  .target
+                                                                                  .value,
+                                                                          )
+                                                                        : null,
+                                                                )
+                                                            }
+                                                            placeholder="(0 ~ 1, 0.1 단위)"
+                                                        />
+                                                    </div>
+                                                )}
+                                            />
+                                        </TableCell>
+                                        <TableHead className="bg-muted font-medium">
+                                            백분위수 기준값(pct)
+                                        </TableHead>
+                                        <TableCell>
+                                            <Controller
+                                                name="pctlCrtrVl"
+                                                control={control}
+                                                render={({ field }) => (
+                                                    <div className="space-y-1">
+                                                        <Input
+                                                            type="number"
+                                                            min="0"
+                                                            max="0.5"
+                                                            step="0.1"
+                                                            value={
+                                                                field.value ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                field.onChange(
+                                                                    e.target
+                                                                        .value
+                                                                        ? Number(
+                                                                              e
+                                                                                  .target
+                                                                                  .value,
+                                                                          )
+                                                                        : null,
+                                                                )
+                                                            }
+                                                            placeholder="(0 ~ 0.5, 0.1 단위)"
+                                                        />
+                                                    </div>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                )}
+
+                                {tabValue !== "IMR" && (
+                                    <TableRow>
+                                        <TableHead className="bg-muted font-medium">
+                                            스케일 조정 계수(A)
+                                        </TableHead>
+                                        <TableCell>
+                                            <Controller
+                                                name="scopCntCntVl"
+                                                control={control}
+                                                render={({ field }) => (
+                                                    <div className="space-y-1">
+                                                        <Input
+                                                            type="number"
+                                                            min="0"
+                                                            max="1"
+                                                            step="0.01"
+                                                            value={
+                                                                field.value ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                field.onChange(
+                                                                    e.target
+                                                                        .value
+                                                                        ? Number(
+                                                                              e
+                                                                                  .target
+                                                                                  .value,
+                                                                          )
+                                                                        : null,
+                                                                )
+                                                            }
+                                                            placeholder="(0 ~ 1, 0.01 단위)"
+                                                        />
+                                                    </div>
+                                                )}
+                                            />
+                                        </TableCell>
+                                        <TableHead className="bg-muted font-medium">
+                                            임계 계수(c)
+                                        </TableHead>
+                                        <TableCell>
+                                            <Controller
+                                                name="thrsCntVl"
+                                                control={control}
+                                                render={({ field }) => (
+                                                    <div className="space-y-1">
+                                                        <Input
+                                                            type="number"
+                                                            min="0"
+                                                            max="100"
+                                                            step="1"
+                                                            value={
+                                                                field.value ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                field.onChange(
+                                                                    e.target
+                                                                        .value
+                                                                        ? Number(
+                                                                              e
+                                                                                  .target
+                                                                                  .value,
+                                                                          )
+                                                                        : null,
+                                                                )
+                                                            }
+                                                            placeholder="(0 ~ 100, 1 단위)"
+                                                        />
+                                                    </div>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+
+                        <DialogFooter className="mt-6">
+                            <Button
+                                type="button"
+                                color="gray"
+                                onClick={() => onOpenChange(false)}
+                            >
+                                취소
+                            </Button>
+                            {data && (
+                                <Button
+                                    type="button"
+                                    color="red"
+                                    onClick={handleDelete}
+                                >
+                                    삭제
+                                </Button>
+                            )}
+                            <Button type="submit" color="green">
+                                저장
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog
+                open={isColumnDialogOpen}
+                onOpenChange={setIsColumnDialogOpen}
+            >
+                <DialogContent className="max-w-[600px]">
+                    <DialogHeader>
+                        <DialogTitle>숫자형 컬럼 목록</DialogTitle>
+                    </DialogHeader>
+                    <div className="max-h-[400px] overflow-y-auto">
+                        <Table variant="default">
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead className="bg-muted text-center font-bold">
+                                        컬럼명
+                                    </TableHead>
+                                    <TableHead className="bg-muted text-center font-bold">
+                                        데이터 타입
+                                    </TableHead>
+                                    <TableHead className="bg-muted text-center font-bold">
+                                        코멘트
+                                    </TableHead>
+                                    <TableHead className="bg-muted text-center font-bold">
+                                        선택
+                                    </TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {numericColumns.length === 0 ? (
+                                    <TableRow>
+                                        <TableCell
+                                            colSpan={4}
+                                            className="py-8 text-center text-gray-500"
+                                        >
+                                            조회된 숫자형 컬럼이 없습니다.
+                                        </TableCell>
+                                    </TableRow>
+                                ) : (
+                                    numericColumns.map((col, idx) => (
+                                        <TableRow key={idx}>
+                                            <TableCell className="text-center">
+                                                {col.columnName}
+                                            </TableCell>
+                                            <TableCell className="text-center">
+                                                {col.dataType}
+                                            </TableCell>
+                                            <TableCell className="text-center">
+                                                {col.columnComment}
+                                            </TableCell>
+                                            <TableCell className="text-center">
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() =>
+                                                        handleSelectColumn(
+                                                            col.columnName,
+                                                        )
+                                                    }
+                                                >
+                                                    입력하기
+                                                </Button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))
+                                )}
+                            </TableBody>
+                        </Table>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }

apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+
+import type { StAnlsDtlResponse } from "@/entities/statistics";
+import { Button } from "@common/components";
+
+import Indicators from "./Indicators";
+import RegionalGrid from "./RegionalGrid";
+import ScatterChart from "./ScatterChart";
+import VerificationList from "./VerificationList";
+
+interface HbVerificationDetailProps {
+    anlsSn: number;
+    onBack: () => void;
+}
+
+export interface AppliedFilter {
+    sido: string | null;
+    gugun: string;
+    status: string;
+}
+
+const HbVerificationDetail: React.FC<HbVerificationDetailProps> = ({
+    anlsSn,
+    onBack,
+}) => {
+    const [selectedVrfcTrgtSn, setSelectedVrfcTrgtSn] = useState<string | null>(
+        null,
+    );
+    const [checkedSns, setCheckedSns] = useState<string[]>([]);
+    const [appliedFilter, setAppliedFilter] = useState<AppliedFilter>({
+        sido: "",
+        gugun: "",
+        status: "",
+    });
+    const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
+    const [selectedTargetInfo, setSelectedTargetInfo] = useState<{
+        statsNm: string;
+        vrfcTrgtNm: string;
+    } | null>(null);
+
+    const handleTargetSelect = (row: StAnlsDtlResponse) => {
+        setSelectedVrfcTrgtSn(String(row.vrfcTrgtSn));
+        setSelectedTargetInfo({
+            statsNm: row.statsNm,
+            vrfcTrgtNm: row.vrfcTrgtNm,
+        });
+        setSelectedRowId(null);
+        setAppliedFilter({
+            sido: "",
+            gugun: "",
+            status: "",
+        });
+    };
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex items-end justify-between px-4 py-2">
+                <div className="flex items-center gap-4">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        color="white"
+                        onClick={onBack}
+                        className=""
+                    >
+                        <i className="diveicon di-arrow-back" />
+                        <span className="sr-only">목록으로 돌아가기</span>
+                    </Button>
+                    <h2 className="text-[1.8rem] font-bold text-title">
+                        검증 상세
+                    </h2>
+                </div>
+                <Button disabled={checkedSns.length === 0}>검증확정</Button>
+            </div>
+
+            <div className="flex flex-col gap-4">
+                <div className="h-[20rem] overflow-y-auto">
+                    <VerificationList
+                        anlsSn={anlsSn}
+                        selectedVrfcTrgtSn={selectedVrfcTrgtSn}
+                        onSelect={handleTargetSelect}
+                        checkedSns={checkedSns}
+                        onCheck={setCheckedSns}
+                    />
+                </div>
+
+                <div className="card card-border !m-4">
+                    <h3 className="p-4 pb-0 text-[1.8rem] font-bold text-title">
+                        검증 결과 상세
+                    </h3>
+                    <div className="flex">
+                        <div className="flex-[0.5] p-4">
+                            <RegionalGrid
+                                anlsSn={anlsSn}
+                                vrfcTrgtSn={selectedVrfcTrgtSn}
+                                statsNm={selectedTargetInfo?.statsNm || ""}
+                                vrfcTrgtNm={
+                                    selectedTargetInfo?.vrfcTrgtNm || ""
+                                }
+                                onFilterChange={setAppliedFilter}
+                                selectedRowId={selectedRowId}
+                                appliedFilter={appliedFilter}
+                            />
+                        </div>
+                        <div className="flex flex-[0.5] flex-col gap-4 p-4 pt-[4.8rem]">
+                            <Indicators
+                                anlsSn={anlsSn}
+                                vrfcTrgtSn={selectedVrfcTrgtSn}
+                            />
+
+                            <ScatterChart
+                                anlsSn={anlsSn}
+                                vrfcTrgtSn={selectedVrfcTrgtSn}
+                                appliedFilter={appliedFilter}
+                                onPointClick={setSelectedRowId}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default HbVerificationDetail;

apps/st/src/components/statistics/verification/detail/Indicators.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { stAnlsRsltApi } from "@/entities/statistics/api/statistics-analysis-result-api";
+import { LoadingWithAnimation } from "@common/components";
+
+interface IndicatorsProps {
+    anlsSn: number;
+    vrfcTrgtSn: string | null;
+}
+
+const Indicators: React.FC<IndicatorsProps> = ({ anlsSn, vrfcTrgtSn }) => {
+    const { data: chartData, isLoading } = useQuery({
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_RSLT,
+            "chart",
+            anlsSn,
+            vrfcTrgtSn,
+        ],
+        queryFn: () => stAnlsRsltApi.getChartData(anlsSn, Number(vrfcTrgtSn)),
+        enabled: !!anlsSn && !!vrfcTrgtSn,
+    });
+
+    const dtl = chartData?.dtl;
+
+    if (!vrfcTrgtSn) {
+        return (
+            <div className="card card-border flex min-h-[10rem] items-center justify-center gap-6 text-[1.4rem] text-muted-foreground">
+                항목을 선택해주세요
+            </div>
+        );
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex w-full items-center justify-center py-40">
+                <div className="relative size-[5rem]">
+                    <LoadingWithAnimation color="primary" />
+                </div>
+            </div>
+        );
+    }
+
+    const IndicatorItem = ({
+        label,
+        value,
+    }: {
+        label: string;
+        value: number | null | undefined;
+    }) => (
+        <div className="flex flex-1 flex-col gap-2 overflow-hidden rounded border bg-gray-50 p-2">
+            <h4
+                className="truncate text-[1.2rem] font-medium text-label"
+                title={label}
+            >
+                {label}
+            </h4>
+            <div className="truncate text-[1.6rem] font-bold">
+                {value != null ? Number(value).toFixed(4) : "-"}
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="card card-border !m-0 grid min-h-[10rem] grid-cols-4 gap-2">
+            <IndicatorItem label="r 중위수" value={dtl?.rtCnterVl} />
+            <IndicatorItem
+                label="(E_m)E 중위수"
+                value={dtl?.lastTrsfScrCnterVl}
+            />
+            <IndicatorItem
+                label="(E_l)E 하한값"
+                value={dtl?.lastTrsfScrLlmtVl}
+            />
+            <IndicatorItem
+                label="(E_u)E 상한값"
+                value={dtl?.lastTrsfScrUplmtVl}
+            />
+            <IndicatorItem label="E_D_L" value={dtl?.llmtVl} />
+            <IndicatorItem label="E_D_U" value={dtl?.uplmtVl} />
+            <IndicatorItem label="이상치 하한선" value={dtl?.otlrLlmtLine} />
+            <IndicatorItem label="이상치 상한선" value={dtl?.otlrUplmtLine} />
+        </div>
+    );
+};
+
+export default Indicators;